67

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

<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 的解决方案，我只是想不出办法。

4

5 回答 5

38

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伪类一起使用相关的错误。

于 2012-07-25T17:14:58.800 回答
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>

（这是一种 hack，我个人会使用 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>

于 2009-01-29T18:39:52.177 回答
8

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

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

于 2009-01-29T18:30:12.260 回答
5

使用这个选择器：

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

这将选择属性“for”中值为“username”的标签

于 2009-01-29T18:35:29.003 回答
5

将输入元素浮动到右侧，实现正确的元素顺序，而无需更改使用方向：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>
于 2009-01-29T19:58:43.313 回答