input[type="checkbox"] {
 /* your style */
}

但这只适用于IE7及以下浏览器，对于那些你必须使用类的浏览器。

由于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 {...}

我真的希望它能像帮助我一样帮助你:)

一些我最近发现的样式单选按钮和复选框。在此之前，我必须使用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;。

希望这对你有所帮助。

我创造自己的解决方案，没有标签

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">

课程也很好用，比如:

<style>
  form input .checkbox
  {
    /* your checkbox styling */
  }
</style>

<form>
  <input class="checkbox" type="checkbox" />
</form>