你可以使用label元素设置复选框的样式，示例如下:

.checkbox > input[type=checkbox] { visibility: hidden; } .checkbox { position: relative; display: block; width: 80px; height: 26px; margin: 0 auto; background: #FFF; border: 1px solid #2E2E2E; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .checkbox:after { position: absolute; display: inline; right: 10px; content: 'no'; color: #E53935; font: 12px/26px Arial, sans-serif; font-weight: bold; text-transform: capitalize; z-index: 0; } .checkbox:before { position: absolute; display: inline; left: 10px; content: 'yes'; color: #43A047; font: 12px/26px Arial, sans-serif; font-weight: bold; text-transform: capitalize; z-index: 0; } .checkbox label { position: absolute; display: block; top: 3px; left: 3px; width: 34px; height: 20px; background: #2E2E2E; cursor: pointer; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; z-index: 1; } .checkbox input[type=checkbox]:checked + label { left: 43px; } <div class="checkbox"> <input id="checkbox1" type="checkbox" value="1" /> <label for="checkbox1"></label> </div>

上面的代码还有一个FIDDLE。注意，有些CSS在旧版本的浏览器中不起作用，但我相信有一些奇特的JavaScript示例!

CodepenLink

-只需添加CSS属性。不需要添加任何Javascript。

开始之前(截至2015年1月)

最初的问题和答案现在已经有5年的历史了。因此，这是一个小小的更新。

首先，当涉及到样式化复选框时，有许多方法。基本宗旨是:

你需要隐藏默认的复选框控件，它是由你的浏览器设置的，并且不能使用CSS以任何有意义的方式覆盖。 在控件隐藏的情况下，您仍然需要能够检测并切换其已选中的状态。 复选框的选中状态需要通过样式化一个新元素来反映。

解决方案(原则上)

上面的任务可以通过许多方法来完成——您经常会听到使用CSS3伪元素是正确的方法。实际上，没有真正的正确或错误的方法，它取决于最适合您将在其中使用它的上下文的方法。也就是说，我有一个更喜欢的。

将复选框包装在标签元素中。这意味着即使它被隐藏，您仍然可以通过单击标签内的任何位置来切换其已检查状态。 隐藏你的复选框。 在复选框后添加一个新元素，您将相应地设置它的样式。它必须出现在复选框之后，以便使用CSS选择它，并根据:checked状态设置样式。CSS不能选择“向后”。

解决方案(代码形式)

label input { visibility: hidden;/* <-- Hide the default checkbox. The rest is to hide and allow tabbing, which display:none prevents */ display: block; height: 0; width: 0; position: absolute; overflow: hidden; } label span {/* <-- Style the artificial checkbox */ height: 10px; width: 10px; border: 1px solid grey; display: inline-block; } [type=checkbox]:checked + span {/* <-- Style its checked state */ background: black; } <label> <input type='checkbox'> <span></span> Checkbox label text </label>

细化(使用图标)

“但是嘿!”我听见你在喊。如果我想在盒子里画一个漂亮的勾号或叉号呢?而且我不想使用背景图片!

这就是CSS3的伪元素可以发挥作用的地方。它们支持content属性，该属性允许您注入表示任一状态的Unicode图标。或者，你也可以使用第三方字体图标源，如font awesome(但要确保你也设置了相关的字体家族，例如FontAwesome)

标签输入{ 显示:没有;/*隐藏默认复选框*/ ｝ /*设置人工复选框*/ 标签跨度{ 高度:10 px; 宽度:10 px; 边框:1px纯灰色; 显示:inline-block; 位置:相对; ｝ /*样式它的checked状态…带有标记图标*/ [type=checkbox]:已检查+ span:before { 内容:“2714 \”; 位置:绝对的; 上图:5 px; 左:0; ｝ <标识> <输入类型=“复选框”> < span > < / span > 复选框标签文本 < / >标签

现代无障碍解决方案-使用重音颜色

使用新的重音-颜色属性，并确保满足适当的3:1对比度，以确保可访问性。这也适用于单选按钮。

.red-input { 颜色:# 9 d3039; 高度:20 px;/*不需要*/ 宽度:20 px;/*不需要*/ ｝ <input class="red-input" type="checkbox" /> <！—单选按钮示例—> <input class="red-input" type="radio" />

旧的答案，我只建议如果你需要更多的定制比上述提供:

我一直在翻看这些答案，大量的答案只是将可访问性排除在门外，并以多种方式违反WCAG。我添加了单选按钮，因为大多数情况下，当你使用自定义复选框时，你也需要自定义单选按钮。

小提琴:

复选框-纯CSS -免费的第三方库 单选按钮-纯CSS -免费的第三方库 复选框*使用FontAwesome，但可以很容易地与Glyphicons等交换

虽然迟到了，但不知何故，在2019年、2020年和2021年，这仍然很困难，所以我添加了我的三个解决方案，它们易于使用和使用。

这些都是免费的JavaScript，可访问的，和外部库免费*…

如果你想要即插即用，只要复制样式表从fiddles，编辑CSS中的颜色代码，以适应你的需要，并在你的方式。如果需要，可以为复选框添加自定义svg复选标记图标。我为那些不喜欢css的人添加了很多注释。

如果你有很长的文本或一个小的容器，并且在复选框或单选按钮输入下遇到文本换行，那么就像这样转换为div。

更详细的解释: 我需要一个解决方案，不违反WCAG，不依赖于JavaScript或外部库，不打破键盘导航，如标签或空格键选择，允许焦点事件，一个解决方案，允许禁用复选框，既选中和未选中，最后一个解决方案，我可以自定义的复选框的外观，但我想与不同的背景颜色，边界半径，svg背景等。

我结合了@Jan turoironic的回答，想出了我自己的解决方案，看起来效果不错。我已经做了一个单选按钮小提琴，使用了许多相同的代码从复选框，以使此工作与单选按钮。

我仍然在学习无障碍，所以如果我错过了一些东西，请留下评论，我会尽量纠正它。

这是我的复选框的代码示例:

input[type="checkbox"] { position: absolute; opacity: 0; z-index: -1; } /* Text color for the label */ input[type="checkbox"]+span { cursor: pointer; font: 16px sans-serif; color: black; } /* Checkbox un-checked style */ input[type="checkbox"]+span:before { content: ''; border: 1px solid grey; border-radius: 3px; display: inline-block; width: 16px; height: 16px; margin-right: 0.5em; margin-top: 0.5em; vertical-align: -2px; } /* Checked checkbox style (in this case the background is green #e7ffba, change this to change the color) */ input[type="checkbox"]:checked+span:before { /* NOTE: Replace the url with a path to an SVG of a checkmark to get a checkmark icon */ background-image: url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-checkmark.svg'); background-repeat: no-repeat; background-position: center; /* The size of the checkmark icon, you may/may not need this */ background-size: 25px; border-radius: 2px; background-color: #e7ffba; color: white; } /* Adding a dotted border around the active tabbed-into checkbox */ input[type="checkbox"]:focus+span:before, input[type="checkbox"]:not(:disabled)+span:hover:before { /* Visible in the full-color space */ box-shadow: 0px 0px 0px 2px rgba(0, 150, 255, 1); /* Visible in Windows high-contrast themes box-shadow will be hidden in these modes and transparency will not be hidden in high-contrast thus box-shadow will not show but the outline will providing accessibility */ outline-color: transparent; /*switch to transparent*/ outline-width: 2px; outline-style: dotted; } /* Disabled checkbox styles */ input[type="checkbox"]:disabled+span { cursor: default; color: black; opacity: 0.5; } /* Styles specific to this fiddle that you do not need */ body { padding: 1em; } h1 { font-size: 18px; } <h1> NOTE: Replace the url for the background-image in CSS with a path to an SVG in your solution or CDN. This one was found from a quick google search for a checkmark icon cdn </h1> <p>You can easily change the background color, checkbox symbol, border-radius, etc.</p> <label> <input type="checkbox"> <span>Try using tab and space</span> </label> <br> <label> <input type="checkbox" checked disabled> <span>Disabled Checked Checkbox</span> </label> <br> <label> <input type="checkbox" disabled> <span>Disabled Checkbox</span> </label> <br> <label> <input type="checkbox"> <span>Normal Checkbox</span> </label> <br> <label> <input type="checkbox"> <span>Another Normal Checkbox</span> </label>

我认为最简单的方法是通过样式化标签并使复选框不可见。

HTML

<input type="checkbox" id="first" />
<label for="first">&nbsp;</label>

CSS

checkbox {
  display: none;
}

checkbox + label {
  /* Style for checkbox normal */
  width: 16px;
  height: 16px;
}

checkbox::checked + label,
label.checked {
  /* Style for checkbox checked */
}

复选框，即使它是隐藏的，仍然是可访问的，它的值将在提交表单时发送。对于旧的浏览器，您可能必须使用JavaScript将标签的类更改为checked，因为我认为旧版本的Internet Explorer不理解复选框上的::checked。

不需要JavaScript或jQuery。

简单地改变你的复选框样式。

input[type="checkbox"] { display: none; border: none !important; box-shadow: none !important; } input[type="checkbox"] + label span { background: url(http://imgh.us/uncheck.png); width: 49px; height: 49px; display: inline-block; vertical-align: middle; } input[type="checkbox"]:checked + label span { background: url(http://imgh.us/check_2.png); width: 49px; height: 49px; vertical-align: middle; } <input type="checkbox" id="option" /> <label for="option"> <span></span> Click me </label>

这是一个JSFiddle链接