Html 标签复选框的单独 CSS 以标记输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17974833/
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
Separate CSS for label checkbox to label input
提问by Chris Nevill
I have used label for with both input textboxes:
我对两个输入文本框都使用了标签：
<label for="Username">Username</label>
<input id="Username" type="text" value="">
and checkboxes/radioboxes
和复选框/单选框
<label for="Live">System is Live</label>
<input id="Live" name="Live" type="checkbox" value="false">
The trouble I have is how do I specify different css for the labels for different input types.
我遇到的麻烦是如何为不同输入类型的标签指定不同的 css。
If I do a generic label css:
如果我做一个通用标签css：
label {
color: #00a8c3;
line-height: 20px;
padding: 2px;
display: block;
float: left;
width: 160px;
}
I find I either end up with unaligned checkboxes or badly positioned textboxes.
我发现我最终会出现未对齐的复选框或定位错误的文本框。
回答by Coop
You could add classes to the labels. For example:
您可以向标签添加类。例如：
<label for="Username" class="textbox-label">Username</label>
<input id="Username" type="text" value="">
<label for="Live" class="checkbox-label">System is Live</label>
<input id="Live" name="Live" type="checkbox" value="false">
Then use the class values in CSS:
然后使用 CSS 中的类值：
label.textbox-label {
/*some styles here*/
}
label.checkbox-label {
/*some styles here*/
}
Alternatively, if you had the labels after the inputs, you could select like this:
或者，如果您在输入后有标签，您可以这样选择：
input[type="text"] + label {
/*some styles here*/
}
input[type="checkbox"] + label {
/*some styles here*/
}
回答by Anil Sharma
You could write css selector like this will work:
您可以像这样编写 css 选择器：
label[for=Username]{ /* ...definitions here... / }
label[for=Live] { / ...definitions here... */ }
回答by Matthias Holdorf
You could write your css selector like this:
您可以像这样编写 css 选择器：
label[for=Username]
label[for=Live]
You may also have a look at this thread:
CSS Selector for selecting an element that comes BEFORE another element?
您可能还看一下这个线程：
CSS Selector for selection an element that come BEFORE another element?
