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

Question

在CSS中有没有办法选择label绑定到具有属性集的input字段(通过for属性)required？就像是:

label:input[required] {
  ...
}

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

我找到的最接近的答案不使用label元素的for属性,但要求它label与HTML中的输入直接相邻.

Answer 1

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

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

CSS：

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

Answer 2

CSS 2属性选择器如何 在浏览器之间非常兼容.

例:

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

还要检查这个了.

Answer 3

此解决方案可在大多数现代浏览器中使用：

<style>

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

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