输入的任何样式都会影响每个输入元素。是否有一种方法可以指定样式只应用于复选框，而不对每个复选框元素应用类?
当前回答
我创造自己的解决方案，没有标签
input[type=checkbox] { position: relative; cursor: pointer; } input[type=checkbox]:before { content: ""; display: block; position: absolute; width: 16px; height: 16px; top: 0; left: 0; border: 2px solid #555555; border-radius: 3px; background-color: white; } input[type=checkbox]:checked:after { content: ""; display: block; width: 5px; height: 10px; border: solid black; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 2px; left: 6px; } <input type="checkbox" name="a"> <input type="checkbox" name="a"> <input type="checkbox" name="a"> <input type="checkbox" name="a">
input[type=checkbox] { position: relative; cursor: pointer; } input[type=checkbox]:before { content: ""; display: block; position: absolute; width: 20px; height: 20px; top: 0; left: 0; background-color:#e9e9e9; } input[type=checkbox]:checked:before { content: ""; display: block; position: absolute; width: 20px; height: 20px; top: 0; left: 0; background-color:#1E80EF; } input[type=checkbox]:checked:after { content: ""; display: block; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 2px; left: 6px; } <input type="checkbox" name="a"> <input type="checkbox" name="a"> <input type="checkbox" name="a"> <input type="checkbox" name="a">
其他回答
我创造自己的解决方案，没有标签
input[type=checkbox] { position: relative; cursor: pointer; } input[type=checkbox]:before { content: ""; display: block; position: absolute; width: 16px; height: 16px; top: 0; left: 0; border: 2px solid #555555; border-radius: 3px; background-color: white; } input[type=checkbox]:checked:after { content: ""; display: block; width: 5px; height: 10px; border: solid black; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 2px; left: 6px; } <input type="checkbox" name="a"> <input type="checkbox" name="a"> <input type="checkbox" name="a"> <input type="checkbox" name="a">
input[type=checkbox] { position: relative; cursor: pointer; } input[type=checkbox]:before { content: ""; display: block; position: absolute; width: 20px; height: 20px; top: 0; left: 0; background-color:#e9e9e9; } input[type=checkbox]:checked:before { content: ""; display: block; position: absolute; width: 20px; height: 20px; top: 0; left: 0; background-color:#1E80EF; } input[type=checkbox]:checked:after { content: ""; display: block; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 2px; left: 6px; } <input type="checkbox" name="a"> <input type="checkbox" name="a"> <input type="checkbox" name="a"> <input type="checkbox" name="a">
使用css2，你可以这样做:
input[type='checkbox'] { ... }
到目前为止，这应该得到了相当广泛的支持。参见浏览器支持
你可以通过以下方法应用到特定属性:
input[type="checkbox"] {...}
这里有解释。
input[type="checkbox"] {
/* your style */
}
但这只适用于IE7及以下浏览器，对于那些你必须使用类的浏览器。
Trident为复选框和单选按钮控件提供了::-ms-check伪元素。例如:
<input type="checkbox">
<input type="radio">
::-ms-check {
color: red;
background: black;
padding: 1em;
}
Windows 8操作系统的IE10界面显示如下:
