我的解决方案

input[type="checkbox"] { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; background: lightgray; height: 16px; width: 16px; border: 1px solid white; } input[type="checkbox"]:checked { background: #2aa1c0; } input[type="checkbox"]:hover { filter: brightness(90%); } input[type="checkbox"]:disabled { background: #e6e6e6; opacity: 0.6; pointer-events: none; } input[type="checkbox"]:after { content: ''; position: relative; left: 40%; top: 20%; width: 15%; height: 40%; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); display: none; } input[type="checkbox"]:checked:after { display: block; } input[type="checkbox"]:disabled:after { border-color: #7b7b7b; } <input type="checkbox"><br> <input type="checkbox" checked><br> <input type="checkbox" disabled><br> <input type="checkbox" disabled checked><br>

我会听从SW4的建议。现在不是了:Volomike的答案比这里的所有答案都要好得多(注意我在回答的评论中建议的改进)。继续阅读这个答案，如果你对这个答案所评论的其他方法感到好奇。

首先，隐藏复选框并用自定义span覆盖它，建议使用以下HTML:

<label>
  <input type="checkbox">
  <span>send newsletter</span>
</label>

标签的包装整齐地允许点击文本，而不需要“for-id”属性链接。然而,

不要使用visibility: hidden或display: none隐藏它

它通过点击或点击来工作，但这是使用复选框的蹩脚方式。有些人仍然使用更有效的Tab键来移动焦点，Space键来激活，用这种方法隐藏会禁用它。如果表单很长，可以节省一些时间来使用tabindex或accesskey属性。如果你观察系统复选框的行为，有一个不错的阴影悬停。样式良好的复选框应该遵循此行为。

cobberboy的答案是推荐字体Awesome，它通常比位图更好，因为字体是可伸缩的向量。使用上面的HTML，我建议以下CSS规则:

Hide checkboxes input[type="checkbox"] { position: absolute; opacity: 0; z-index: -1; } I use just negative z-index since my example uses big enough checkbox skin to cover it fully. I don't recommend left: -999px since it is not reusable in every layout. Bushan wagh's answer provides a bulletproof way to hide it and convince the browser to use tabindex, so it is a good alternative. Anyway, both is just a hack. The proper way today is appearance: none, see Joost's answer: input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; } Style checkbox label input[type="checkbox"] + span { font: 16pt sans-serif; color: #000; } Add checkbox skin input[type="checkbox"] + span:before { font: 16pt FontAwesome; content: '\00f096'; display: inline-block; width: 16pt; padding: 2px 0 0 3px; margin-right: 0.5em; }

\00f096是fontawesome的方形，填充被调整为在焦点上提供均匀的虚线轮廓(见下文)。

添加复选框选中的皮肤 Input [type="checkbox"]:已检查+ span:before { 内容:“\ 00 f046”; ｝

\00f046是Font Awesome的check-square-o，它和square-o的宽度不一样，这就是上面width样式的原因。

添加焦点轮廓 Input [type="checkbox"]:焦点+ span:before { 轮廓:1px虚线#aaa; ｝ Safari不提供这个功能(参见@Jason Sankey的评论)，只支持Safari的CSS 为禁用复选框设置灰色 Input [type="checkbox"]:disabled + span { 颜色:# 999; ｝ 在非禁用复选框上设置悬停阴影 Input [type="checkbox"]:not(:禁用)+ span:hover:before { text-shadow: 0 1px 2px #77F; ｝

Test it on JS Fiddle

Try to hover the mouse over the checkboxes and use Tab and Shift+Tab to move and Space to toggle.

更新:

下面的答案参考了css3广泛可用之前的情况。在现代浏览器(包括Internet Explorer 9及更高版本)中，使用您喜欢的样式创建复选框替换更简单，而无需使用JavaScript。

以下是一些有用的链接:

使用CSS创建自定义表单复选框 简单的CSS复选框生成器 你可以用复选框黑客做的事情 使用CSS3实现自定义复选框和单选按钮 如何样式的复选框与CSS

It is worth noting that the fundamental issue has not changed. You still can't apply styles (borders, etc.) directly to the checkbox element and have those styles affect the display of the HTML checkbox. What has changed, however, is that it's now possible to hide the actual checkbox and replace it with a styled element of your own, using nothing but CSS. In particular, because CSS now has a widely supported :checked selector, you can make your replacement correctly reflect the checked status of the box.

年长的回答

这是一篇关于设置复选框样式的有用文章。基本上，作者发现不同浏览器的默认复选框差异很大，许多浏览器总是显示默认复选框，无论您如何设置它的样式。所以真的没有简单的方法。

不难想象，可以使用JavaScript将图像覆盖在复选框上，然后单击该图像就会选中真正的复选框。没有JavaScript的用户会看到默认的复选框。

编辑补充:这里有一个很好的脚本，为您做这件事;它隐藏了真正的复选框元素，将其替换为有样式的span，并重定向单击事件。

看起来你只需要使用CSS就可以改变复选框的灰度颜色。

下面将复选框从黑色转换为灰色(这是我想要的):

input[type="checkbox"] {
    opacity: .5;
}

我更喜欢使用图标字体(如fontawesme)，因为它很容易用CSS修改它们的颜色，而且它们在高像素密度的设备上缩放得非常好。这里是另一个纯CSS变体，使用类似于上面的技术。

(下面是一个静态图像，这样你可以可视化结果;请参阅JSFiddle的交互式版本。)

与其他解决方案一样，它使用label元素。相邻的span保存复选框字符。

span.bigcheck-target { font-family: FontAwesome; /* Use an icon font for the checkbox */ } input[type='checkbox'].bigcheck { position: relative; left: -999em; /* Hide the real checkbox */ } input[type='checkbox'].bigcheck + span.bigcheck-target:after { content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */ } input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { content: "\f046"; /* fontawesome checked box (fa-check-square-o) */ } /* ==== Optional - colors and padding to make it look nice === */ body { background-color: #2C3E50; color: #D35400; font-family: sans-serif; font-weight: 500; font-size: 4em; /* Set this to whatever size you want */ } span.bigcheck { display: block; padding: 0.5em; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <span class="bigcheck"> <label class="bigcheck"> Cheese <input type="checkbox" class="bigcheck" name="cheese" value="yes" /> <span class="bigcheck-target"></span> </label> </span>

这是它的JSFiddle。

你可以简单地使用appearance:在现代浏览器中没有，这样就没有默认样式，所有的样式都被正确应用:

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 1px solid gray;
  outline: none;
  vertical-align: middle;
}

input[type=checkbox]:checked {
  background-color: blue;
}