Question

我正在为我的网站创建一个登录页面，我希望在文本框获得焦点时加粗输入框之前的标签。现在我有以下标记：

<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的解决方案，我只是想办法做到这一点。

Answer 1

CSS Selectors 4 Spec提供了使用!定义选择器“主题”的语法。截至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伪类相关的错误。

Answer 2

如果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>

Answer 3

没有选择器可以使用CSS为您提供前一个元素。

您需要使用javascript来处理您所追求的内容。

Answer 4

使用此选择器：

label[for=username]
{
font-weight: bold
}

这将选择属性'for'

中具有值'username'的标签

Answer 5

将输入元素向右浮动，实现正确的元素顺序，而不会更改带有方向的标签文本中“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>

CSS Selector用于选择另一个元素之前的元素？

5 个答案: