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

Question

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

TIA

Answer 1

选项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 {} 

Answer 2

这取决于你的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 3

如果你想用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); 
     } 
    }); 
    }); 

你可以看到它在行动here。它可能会写得更好，但它会起作用。