Question

我试图把焦点放在字段上改变文本的颜色，但无论我尝试什么：它都不起作用。以下是HTML：

＆＃13;

.register-section input:focus + .register-section label[for=signup_username] {
    color: #ffffff !important;
}

＆＃13;

<div class="register-section" id="basic-details-section">
<h4>Account Details</h4>
<label for="signup_username">Username (required)</label>
<input type="text" name="signup_username" id="signup_username" value="" />
</div>

＆＃13;

谁能告诉我自己做错了什么？提前谢谢！

Answer 1

+邻接运算符只能用于选择在初始选择器之后的节点（CSS选择器只能在此方向上解析）。因此，因为您的标签是之前输入的html，所以您无法使用CSS在输入的:focus状态下选择它。

要解决此问题，您需要更改HTML以反转元素的顺序，并调整CSS以更改其显示顺序，然后根据需要进行选择：

.register-section label[for=signup_username] { float: left; } .register-section input:focus + label[for=signup_username] { color: #ffffff !important; }

<div class="register-section" id="basic-details-section"> <h4>Account Details</h4> <input type="text" name="signup_username" id="signup_username" value="" /> <label for="signup_username">Username (required)</label> </div>

Answer 2

对于那些希望使用jQuery获得相同结果的用户的替代方案，定位输入字段的focus和blur事件以更改标签的颜色：

$('#signup_username').on('focus blur', function(e){
    var label = $("label[for=signup_username]");
    if (e.type == 'focus'){
        label.css('color','#FFF');
    }
    else {
        label.css('color','#000');    
    }
});

请参阅JSFiddle

CSS重点。无法让它更改标签字段

2 个答案: