绑定到输入的标签的 CSS 选择器

Question

有没有办法在 CSS 中选择绑定到具有 required 属性集的 input 字段的 labels（通过 for 属性）？比如：

label:input[required] {
  ...
}

目前，我将class="required" 添加到标签和输入以进行样式设置。我现在在必填字段中有 HTML5 属性 required="required"。删除多余的类属性会很好。

我发现的closest answer 不使用label 元素的for 属性，但要求label 与HTML 中的输入直接相邻。

Answer 1

CSS 2 Attribute Selectors 怎么样？ 它在浏览器之间非常兼容。

例子：

<style>
label[required=required]
{
color: blue;
}
</style>
<label required="required" for="one">Label:</label><input name="one" id="one" />

同时检查this。

Answer 2

此解决方案适用于大多数现代浏览器：

<style>

label > input[required="required"] {
    background: red; 
}

</style>
<label for="myField"><input required="required" id="myField" /></label>

Answer 3

您可以使用label[for="title"]，其中“title”是您输入的 ID。 示例：

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

css:

label[for="title"] {
  color: blue;
}

Answer 4

我不认为这真的可以通过 CSS 以 OP 想要的方式实现。 CSS 不能那样工作。

在我看来，更好的方法是退后一步，着眼大局。您有一个表格，其中一些字段是必需的，而有些则不是。最好先给用户所有必填字段，或者将必填字段组合在一起，并将它们与可选字段明确分开。

你可以创建一个结构如

<form>
     <ul class="required_fields">
       <li>
          <label>username</label>
          <input />
       </li>
       <li>
          <label>email</label>
          <input />
       </li>
     </ul
     <ul class="optional_fields">
          ...
     </ul>
 </form>

/* CSS */
.required_fields label {font-weight: bold} 
.required_fields label:after { content: "*"; color: red } /*more styles for labels*/

这种方法有很多好处。您可以轻松地从“必需”组中添加和删除项目，而无需单独修改每个项目。您可以根据需要将“必需”类分配到链的最高层。如果表单具有“必需”类，则其中的所有内容都将被标记为必需。如果您决定将“必需”类称为其他名称，则可以进行更改的地方较少。总的来说，这种方法还可以帮助您更好地组织表单。您不应将必填字段和可选字段混在一起。

您可以更进一步，使用一些 javascript 将所需的属性也注入到输入字段中。

$(".required_fields input").each(function(){
   this.setAttribute('required', 'required');
});

Answer 5

这在 CSS 中是不可能的（正如我所尝试的那样）你可以在 JS 中轻松地做到这一点：

let l = document.querySelectorAll('input[required]')
l.forEach(e => {
  e ? e.parentElement.classList.add('required-input') : null;
})

let l = document.querySelectorAll('input[required]')
l.forEach(e => {
  e ? e.parentElement.classList.add('required-input') : null;
})

.required-input label::after {
  content: " *";
  color: red;
}

<div>
  <label for="user">Required</label>
  <input name="user" required/>
</div>
<br>
<div>
  <label for="user">not required</label>
  <input name="user" />
</div>