Dan*_*ert 64 css css-selectors
我正在为我的网站登录页面,我想在文本框获得焦点时加粗输入框前面的标签.现在我有以下标记:
<label for="username">Username:</label>
<input type="textbox" id="username" />
<label for="password">Password:</label>
<input type="textbox" id="password" />
我可以使用相邻的选择器来选择文本框后面的标签,但我不能选择之前的元素.我可以使用这个CSS选择器规则,但它只选择后面的标签,所以当用户名文本框获得焦点时,密码标签变为粗体.
input:focus + label {font-weight: bold}
有什么我可以做的工作吗？我知道JavaScript可以用来轻松实现这一点,但是如果可能的话,我想使用纯粹的基于CSS的解决方案,我只是无法想办法做到这一点.
Dan*_*ert 36
的CSS选择器4规格提供了一种用于通过使用一限定所述的选择器的"受试者"语法!.截至2016年初,这在任何浏览器中都不可用.我包括这个,因为一旦浏览器实现这种语法,这将是使用纯CSS执行此操作的正确方法.
考虑到问题中的加价
<label for="username">Username:</label>
<input type="textbox" id="username" />
<label for="password">Password:</label>
<input type="textbox" id="password" />
这个CSS可以解决这个问题.
label:has(+ input:focus) {font-weight: bold}
当然,这假设浏览器实际上实现了主题选择器,并且没有与此语法如何与:focus伪类一起使用相关的错误.
Mat*_*ell 24
如果在input之前,可以使用"相邻的兄弟选择器" label.只需把input之前的label,然后修改布局放到label之前input.这是一个例子:
<head runat="server">
<title></title>
<style type="text/css">
input:focus + label {font-weight: bold}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="direction:rtl">
<input type="text" id="username" />
<label for="username">Username:</label>
</div>
<div style="direction:rtl">
<input type="password" id="password" />
<label for="password">Password:</label>
</div>
</form>
</body>
(这是一种黑客攻击,我个人会用javascript来做这个)
input:focus + label {font-weight: bold}<form id="form1" runat="server">
<div style="direction:rtl">
<input type="text" id="username" />
<label for="username">Username:</label>
</div>
<div style="direction:rtl">
<input type="password" id="password" />
<label for="password">Password:</label>
</div>
</form>小智 5
使用此选择器:
label[for=username]
{
font-weight: bold
}
这将选择属性'for'中具有值'username'的标签
将输入元素浮动到右侧,可以实现正确的元素顺序,而不会在使用方向:rtl获得的标签文本中更改"用户名"和":"的顺序.
<style type="text/css">
form {text-align: right;}
input:focus + label {font-weight: bold}
input {float:right; clear:right;}
</style>
<form>
<div>
<input type="text" id="username" />
<label for="username">Username:</label>
</div>
<div>
<input type="password" id="password" />
<label for="password">Password:</label>
</div>
</form>
| 归档时间： |
|
| 查看次数： |
85297 次 |
| 最近记录： |