我试图将焦点放在一个字段上,更改文本的颜色,但无论我尝试什么:它都不起作用。以下是 HTML:
.register-section input:focus + .register-section label[for=signup_username] {
color: #ffffff !important;
}
<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>
谁能告诉我我做错了什么? 提前致谢!
最佳答案
+
邻接运算符只能用于选择初始选择器之后的 DOM 节点(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>
关于CSS 焦点。无法更改标签字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27603594/