输入的任何样式都会影响每个输入元素。是否有一种方法可以指定样式只应用于复选框，而不对每个复选框元素应用类?
当前回答
input[type="checkbox"] {
/* your style */
}
但这只适用于IE7及以下浏览器，对于那些你必须使用类的浏览器。
其他回答
虽然CSS确实为您提供了一种方法来执行特定于复选框类型或其他类型的样式，但不支持这种样式的浏览器将会出现问题。
我认为在这种情况下，您唯一的选择是将类应用到复选框中。
只需将class="checkbox"添加到您的复选框中。
然后在css代码中创建该样式。
你可以这样做:
main.css
input[type="checkbox"] { /* css code here */ }
ie.css
.checkbox{ /* css code here for ie */ }
然后使用IE特定的css包括:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
您仍然需要添加类，以便它在IE中工作，并且它不能在其他不支持IE的非IE浏览器中工作。但是它会使你的网站具有前瞻性的css代码，随着IE得到支持，你将能够从复选框中删除IE特定的css代码和css类。
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界面显示如下:
一些我最近发现的样式单选按钮和复选框。在此之前，我必须使用jQuery和其他工具。但这是愚蠢的简单。
input[type=radio] {
padding-left:5px;
padding-right:5px;
border-radius:15px;
-webkit-appearance:button;
border: double 2px #00F;
background-color:#0b0095;
color:#FFF;
white-space: nowrap;
overflow:hidden;
width:15px;
height:15px;
}
input[type=radio]:checked {
background-color:#000;
border-left-color:#06F;
border-right-color:#06F;
}
input[type=radio]:hover {
box-shadow:0px 0px 10px #1300ff;
}
你可以对复选框做同样的事情，显然改变输入[type=radio]为输入[type=checkbox]，并改变border-radius:15px;border - radius: 4 px;。
希望这对你有所帮助。
感谢所有对这篇文章做出贡献的人。 看看我使用纯CSS完成了什么。
input[type=checkbox] { position: absolute; cursor: pointer; width: 0px; height: 0px; } input[type=checkbox]:checked:before { content: ""; display: block; position: absolute; width: 34px; height: 34px; border: 4px solid #FFCB9A; border-radius: 20px; background-color: #445768; transition: all 0.2s linear; } input[type=checkbox]:before { content: ""; display: block; position: absolute; width: 34px; height: 34px; border: 4px solid #FFCB9A; border-radius: 3px; background-color: #445768; } input[type=checkbox]:after { content: ""; display: block; width: 0px; height: 0px; border: solid #FFCB9A; border-width: 0 0px 0px 0; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); position: absolute; top: 0px; left: 50px; transition: all 0.2s linear; } input[type=checkbox]:checked:after { content: ""; display: block; width: 12px; height: 21px; border: solid #FFCB9A; border-width: 0 5px 5px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 2px; left: 14px; } <input type="checkbox">
总结
因此，下面控制实际的复选框，我们通过添加h:0和w:0来隐藏它。
input[type=checkbox] {...}
其余部分控制虚拟复选框。
当勾选时，它控制虚拟复选框的背景。
input[type=checkbox]:checked:before {...}
当未选中复选框时，这将控制虚拟复选框的背景。
input[type=checkbox]:before {...}
当未选中复选框时，这将控制虚拟复选框的前台。
input[type=checkbox]:after {...}
当勾选时，它控制虚拟复选框的前台。
input[type=checkbox]:checked:after {...}
我真的希望它能像帮助我一样帮助你:)
