输入的任何样式都会影响每个输入元素。是否有一种方法可以指定样式只应用于复选框，而不对每个复选框元素应用类?
当前回答
一些我最近发现的样式单选按钮和复选框。在此之前，我必须使用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;。
希望这对你有所帮助。
其他回答
课程也很好用，比如:
<style>
form input .checkbox
{
/* your checkbox styling */
}
</style>
<form>
<input class="checkbox" type="checkbox" />
</form>
input[type="checkbox"] {
/* your style */
}
但这只适用于IE7及以下浏览器，对于那些你必须使用类的浏览器。
使用css2，你可以这样做:
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等创建)
你可以使用这个选择器将你的样式应用到复选框输入:
input[type='checkbox']{}
但不幸的是，它不支持自定义样式，所以你可以使用“after”和“before”来覆盖原始输入: 参见:演示
HTML
<input
type="checkbox"
style="background-color: #d81b60; color: #fff"
name="checkboxGreen"
/>
CSS
input[type='checkbox'] {
position: relative;
cursor: pointer;
margin: 20px;
}
input[type='checkbox']:before {
content: '';
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
background-color: inherit;
outline: 1px rgba(255, 255, 255, 0.2) solid;
transform: translate(-50%, -50%);
}
input[type='checkbox']:checked:before {
content: '';
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
background-color: inherit;
outline: 1px rgba(255, 255, 255, 0.2) solid;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 4px 1px #fff;
}
input[type='checkbox']:checked:after {
content: '';
display: block;
width: 6px;
height: 10px;
border: solid;
border-width: 0 2px 2px 0;
border-color: inherit;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
结果:
