你可以用CSS来设置活动表单输入标签的样式

Question

给出以下html

<label for="inputelement">label</label>
<input type="text" id="inputelement" name="inputelement" />

您可以使用焦点设置输入的样式

input:focus { background: green; }

有没有一种方法可以在<label />没有JavaScript 的情况下设计样式？

谢谢大家

Answer 1

不,很遗憾,css中没有前任选择器

input:focus -+ label { ... }

会很可爱的.

输入后的标签是可操作的:

input:focus + label { ... }

你可以使用一些定位来显示...

Answer 2

为了完整起见，如果您的输入字段在标签内，您可以使用focus-within：

HTML：

<label>
   <input name="example" type="text">
</label>

CSS：

label:focus-within {
   background: #DEF;
}

Answer 3

您可以使用属性选择器:

label[for=inputelement]:focus,
label[for=inputelement]:active {
    /*styles here*/
}

请注意,IE6不支持此功能,但应该适用于所有其他浏览器,包括IE7和IE8.

这显然只适用于该特定ID.如果您希望它适用于所有 ID,只需省略ID:

label[for]:focus,
label[for]:active {
    /*styles here*/
}

现在,这将适用于具有for属性的所有标签.

如果你需要介于两者之间,你需要使用类.

Answer 4

更新

请确保检查草案,因为这可能会发生变化:https://drafts.c​​sswg.org/selectors-4/#relational

:has()关系伪类将允许选择父类,例如,以下选择器仅匹配<a>包含<img>子元素的元素 :

a:has(> img)

这可以与其他选择器结合使用:focus,:active或者:not提供很多潜力.

不幸的是,在撰写本文时,浏览器支持并不是很好:https://caniuse.com/#feat=css-has

为将来找到此页面的人添加此项.CSS4将有一个父选择器,允许您选择将样式应用于哪个元素:

我认为当前的规范允许您指定哪个项目与一个匹配!标志 - 主题选择器.

label! > input {
  font-weight: bold;
}

这允许远比父母更大的控制,例如在p标签下方的这个可怕链中是目标!

article > h1 + section > p! > b > a {
  font-style: italic;
}

Answer 5

您可以，只要label遵循input标记中的：

input:focus + label,
input:active + label {
    /* style */
}

Answer 6

好的，想法是将输入、标签、帮助、错误等包装在 Flexbox 容器中。然后使用+选择器选择标签元素。 注意：只有当您使用 Flexitem 属性定义订单之后，
它才会起作用。 当然你也可以使用类名。<label><input>
<label>order

.container {
    display: flex;
    flex-direction: column;
}
input {
    border: none;
}
label {
    order: -1;
}
input:focus {
    border: 1px solid red;
}
input:focus + label{
    color: red;
}

<div class="container">
    <input id="username" />
    <label for="username">Username</label>
</div>