你能只用 CSS 来设计一个活动表单输入的标签吗

Question

给定以下html

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

您可以使用

input:focus { background: green; }

有没有办法在没有 JavaScript 的情况下也为 <label /> 样式？

谢谢大家

原文由 Dave Taylor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不，不幸的是，CSS 中没有前置选择器

input:focus -+ label { ... }

会很可爱。

在输入之后有标签是可行的：

 input:focus + label { ... }

你可以使用一些定位来显示之前……

原文由 Ian Wood 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

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

HTML:

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

CSS：

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

原文由 Avatar 发布，翻译遵循 CC BY-SA 4.0 许可协议