输入的任何样式都会影响每个输入元素。是否有一种方法可以指定样式只应用于复选框，而不对每个复选框元素应用类?
当前回答
感谢所有对这篇文章做出贡献的人。 看看我使用纯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 {...}
我真的希望它能像帮助我一样帮助你:)
其他回答
你可以通过以下方法应用到特定属性:
input[type="checkbox"] {...}
这里有解释。
由于IE6不理解属性选择器，你可以将一个只有IE6才能看到的脚本(带有条件注释)和jQuery或Dean Edwards的IE7.js结合起来。
IE7(.js)是一个JavaScript库，它使Microsoft Internet Explorer运行起来像一个标准兼容的浏览器。它修复了许多HTML和CSS问题，并使透明PNG在IE5和IE6下正常工作。
使用类或jQuery或IE7.js的选择取决于你的喜好和你的其他需求(也许PNG-24透明度整个你的网站，而不必依赖于PNG-8完全透明，退回到IE6上的1位透明-仅由Fireworks和pngnq等创建)
感谢所有对这篇文章做出贡献的人。 看看我使用纯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 {...}
我真的希望它能像帮助我一样帮助你:)
课程也很好用，比如:
<style>
form input .checkbox
{
/* your checkbox styling */
}
</style>
<form>
<input class="checkbox" type="checkbox" />
</form>
使用css2，你可以这样做:
input[type='checkbox'] { ... }
到目前为止，这应该得到了相当广泛的支持。参见浏览器支持
