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/

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

Answer 2

选项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 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中看到它。它可能写得更好，但它会起作用。

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

3 个答案: