输入焦点上的突出显示标签不起作用

Question

我的 HTML 中有这个：

<label class="control-label" for="firstName">{{ 'OA_FIRST_NAME' | translate | uppercase }}<sup>*</sup></label>
<input
    formControlName="firstName"
    class="signup-input full-width" 
    type="text"
    name="firstName" 
    required>

这在我的 SCSS 中：

input[name=firstName]:focus {

    background-color: blue !important;

    label[for=firstName] {
        background-color: red !important;
        color: green !important;
    }
}

输入的蓝色背景有效，但标签根本没有改变。我做错了吗？

Answer 1

您需要将label 放在input 框旁边并使用+ 或~ 选择器，即

input:focus + label {
  color: red;
}

<input type="text">
<label>Label</label>

要直观地重新排序输入和标签位置，请参阅使用 flexbox 的简单演示。

.fieldset {
  display: inline-flex;
  flex-direction: row-reverse;
}
.fieldset label {
  margin-right: 4px;
}
.fieldset input:focus + label {
  color: red;
}

<div class="fieldset">
  <input type="text">
  <label>Label</label>
</div>