您可以避免添加额外的标记。这适用于任何地方，除了IE通过设置CSS外观:

输入(type = "复选框"){ -webkit-appearance:没有; -moz-appearance:没有; 外观:无; /*样式复选框*/ 宽度:16 px; 高:16 px; 背景颜色:红色; ｝ 检查输入(type = "复选框"):{ 背景颜色:绿色; ｝ <input type="checkbox" />

我会听从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.

从我的谷歌，这是最简单的方法复选框样式。只需根据您的设计添加:after和:checked:after CSS。

body{ background: #DDD; } span{ margin-left: 30px; } input[type=checkbox] { cursor: pointer; font-size: 17px; visibility: hidden; position: absolute; top: 0; left: 0; transform: scale(1.5); } input[type=checkbox]:after { content: " "; background-color: #fff; display: inline-block; color: #00BFF0; width: 14px; height: 19px; visibility: visible; border: 1px solid #FFF; padding: 0 3px; margin: 2px 0; border-radius: 8px; box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16); } input[type=checkbox]:checked:after { content: "\2714"; display: unset; font-weight: bold; } <input type="checkbox"> <span>Select Text</span>

你可以简单地使用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;
}

这是最简单的方法，你可以选择哪个复选框来提供这种样式。

CSS:

.check-box input {
  display: none;
}

.check-box span:before {
  content: ' ';
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("unchecked.png");
}

.check-box input:checked + span:before {
  background: url("checked.png");
}

HTML:

<label class="check-box">
  <input type="checkbox">
  <span>Check box Text</span>
</label>

警告:在撰写本文时，以下内容是正确的，但与此同时，事情有了进展。

AFAIK现代浏览器使用本机操作系统控件显示复选框，所以没有办法对它们进行样式化。