Question

CSS中是否有一种方法可以选择label绑定到input字段的for字段，并设置required属性？类似的东西：

label:input[required] {
  ...
}

目前，我正在为样式标签和输入添加class="required"。我现在在所需的输入字段中有HTML5属性required="required"。删除冗余类属性会很好。

我找到的closest answer不使用label元素的for属性，但要求label与HTML中的输入直接相邻。< / p>

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"]，其中“标题”是输入的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*/

这种方法有很多好处。您可以添加和删除“必需”中的项目。轻松分组，无需单独修改每个。您可以指定“必需的”＆＃39;如你所愿，你可以选择高级链。如果表单中有“要求”的表格。 class，然后其中的所有内容都将被标记为必需。如果你决定要求更改，那么更改的地方就会减少。 class应该被称为别的东西。通常，这种方法还可以帮助您更好地组织表单。您不应混合必填字段和可选字段。

你可以更进一步，并有一些javascript，将所需的属性注入输入字段。

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

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

4 个答案: