绑定到输入的标签的 CSS 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2075717/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Selector for label bound to input
提问by Ted Bergeron
Is there a way in CSS to select labels bound to inputfields (via the forattribute) having the requiredattribute set? Something like:
CSS中有没有办法选择label绑定到具有属性集的input字段（通过for属性）的s required？就像是：
label:input[required] {
...
}
Currently, I'm adding class="required"to labels and inputs for styling. I now have the HTML5 attribute required="required"in the required input fields. It would be nice to remove the redundant class attributes.
目前，我正在添加class="required"标签和输入以进行样式设置。我现在required="required"在必需的输入字段中有 HTML5 属性。删除多余的类属性会很好。
The closest answerI found doesn't use the labelelement's forattribute, but would require that the labelbe directly adjacent to the input in the HTML.
我找到的最接近的答案不使用label元素的for属性，但要求label与 HTML 中的输入直接相邻。
回答by Tom
How about CSS 2 Attribute SelectorsIt is pretty compatible amongst browsers.
CSS 2 属性选择器怎么样 它在浏览器之间非常兼容。
Example:
例子：
<style>
label[required=required]
{
color: blue;
}
</style>
<label required="required" for="one">Label:</label><input name="one" id="one" />
Also check thisout.
还要检查这个了。
回答by Umberto Babini
This solution works in most modern browsers:
此解决方案适用于大多数现代浏览器：
<style>
label > input[required="required"] {
background: red;
}
</style>
<label for="myField"><input required="required" id="myField" /></label>
回答by Cristian Oana
you can use label[for="title"]where "title" is the ID of your input.
Example:
您可以使用label[for="title"]其中“title”是您输入的 ID。例子：
<label for="title">Title</label>
<input type="text" id="title" name="title">
css:
css：
label[for="title"] {
color: blue;
}
回答by mastaBlasta
I don't think this can really be accomplished through CSS in the way that the OP wants. CSS just doesn't work that way.
我不认为这真的可以通过 OP 想要的方式通过 CSS 来完成。CSS 只是不能那样工作。
A better approach in my opinion is to step back and look at the big picture. You have a form where some fields are required and some are not. It is a good approach to give the user all the required fields first, or group the required fields together, and keep them clearly separate from the optional fields.
在我看来，更好的方法是退一步看大局。您有一个表单，其中某些字段是必需的，而有些则不是。首先向用户提供所有必填字段，或将必填字段组合在一起，并将它们与可选字段明确分开是一种很好的方法。
You can create a structure such as
您可以创建一个结构，例如
<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*/
There are a number of benefits to this approach. You can add and remove items from the 'required' group easily without having to modify each one individually. You can assign the 'required' class as high up the chain as you want. If the form had the 'required' class, then everything in it would be labeled as required. There are fewer places to make changes, if you decided that the 'required' class should be called something else. And in general this approach also helps you organize your forms better. You should not intermingle required and optional fields.
这种方法有很多好处。您可以轻松地从“必需”组中添加和删除项目，而无需单独修改每个项目。您可以根据需要将“必需”类分配到链的最高位置。如果表单具有“必需”类，则其中的所有内容都将标记为必需。如果您决定将“必需”类称为其他名称，则可以进行更改的地方较少。一般来说，这种方法还可以帮助您更好地组织表单。您不应混合必填字段和可选字段。
You could take this a step further and have some javascript that will inject the required attribute into the input fields as well.
您可以更进一步，并使用一些 javascript 将所需的属性也注入到输入字段中。
$(".required_fields input").each(function(){
this.setAttribute('required', 'required');
});
