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框旁边并使用+或~选择器，即

＆＃13;

input:focus + label {
  color: red;
}

＆＃13;

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

＆＃13;

要在视觉上重新排序输入和标签位置，请参阅使用flexbox的简单演示。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: