重点标签焦点不工作

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>