css - 是否可以根据输入的类型来设置标签的样式？

Question

我想为我的下拉列表设置与其他输入类型不同的标签样式，但希望避免为每个标签分配类。是否可以根据标签的类型来设置标签的样式？

TIA

Answer 1

这取决于你的 html 是如何构建的。如果将标签放在 html 中的输入之后，则可以创造性地使用兄弟选择器。

HTML：

<div>
<input type="text" value="lorem ipsum" id="lorem" />
<label for="lorem">lorem label</label>

<input type="checkbox" id="check"/>
<label for="check">check label</label>
</div>

CSS：

input[type="text"] + label {
   color: red;   
}
input[type="checkbox"] + label {
   color: blue;   
}

我设置了一个小小提琴来演示：http: //jsfiddle.net/pLCBP/

也就是说，在现实生活中，我可能会在每个输入和标签“组”周围放置一个包装器 div，并给它一个类来指示其中包含什么类型的字段，因为这使得定位更容易。但如你所见，你所问的确实是可能的。

Answer 2

如果你想用 Javascript/jQuery 来实现它，你可以运行几个循环来将标签与其输入类型相关联，然后让样式由类处理。

像这样的东西会起作用

$("label").each(function(){
    var forText = $(this).attr("for");
    $("input").each(function(){
      if($(this).attr("id") == forText){
        var inputType = $(this).attr("type");
        $("label[for="+forText+"]").addClass(inputType);
      } 
    });
  }); 

您可以在这里看到它的实际效果。它可能会写得更好，但它会起作用。

Answer 3

选项 A
不，这是不可能的。你应该给每个标签它自己的类。喜欢

<label for="test" class="inputText">Name:</label><input name="test" id="test" />

CSS

.inputText{} // Label
input[type=text]{} // Input

选项 B
什么也是一个选项。是如果您在输入/选择之后使用标签。你可以这样做。这是因为+您可以选择 DOM 中的下一个元素。太糟糕了，这-是不可能的。

input[type=text] + label {}
input[type=password] + label {}
input[type=checkbox] + label {}
select + label {}
textarea + label {}