这是一个CSS/HTML的版本，不需要jQuery或JavaScript，简单干净的HTML和真正简单和短的CSS。

这是JSFiddle

http://jsfiddle.net/v71kn3pr/

下面是HTML:

<div id="myContainer">
    <input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" />
    <label for="myCheckbox_01_item" class="box"></label>
    <label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label>
</div>

这是CSS

#myContainer {
    outline: black dashed 1px;
    width: 200px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] {
    display: none;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #FFF ;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #F00;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
    font: normal 12px arial;
    display: inline-block;
    line-height: 27px;
    vertical-align: top;
    margin: 5px 0px;
}

这可以调整为能够有单独的单选或复选框，复选框组和单选按钮组。

这个html/css，将允许你也捕获点击标签，所以复选框将被选中和未选中，即使你只是点击标签。

这种类型的复选框/单选按钮适用于任何形式，完全没有问题。已测试使用PHP, ASP。NET (.aspx)， JavaServer Faces和ColdFusion。

有一种方法可以使用CSS来做到这一点。我们可以(ab)使用label元素并样式化该元素。需要注意的是，这将不适用于Internet Explorer 8及更低版本。

.myCheckbox输入{ 位置:相对; z - index: -9999; ｝ .myCheckbox span { 宽度:20 px; 高度:20 px; 显示:块; 背景:url(“link_to_image”); ｝ .myCheckbox输入:checked + span { 背景:url(“link_to_another_image”); ｝ <label for="test">我的样式化的"复选框"的标签</label> <标签类= " myCheckbox " > <input type="checkbox" name="test" /> < 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>

这帮助我更改复选框的样式(颜色)

input[type=checkbox] {
  accent-color: red;
}

我们也可以对单选按钮使用相同的方法。

SCSS / SASS实现

更现代的方法

对于使用SCSS(或容易转换为SASS)的人来说，下面的内容将会有所帮助。有效地，在复选框旁边创建一个元素，这就是您要设置样式的元素。当单击复选框时，CSS重新设置姐妹元素的样式(为您选中的新样式)。代码如下:

label.checkbox { input[type="checkbox"] { visibility: hidden; display: block; height: 0; width: 0; position: absolute; overflow: hidden; &:checked + span { background: $accent; } } span { cursor: pointer; height: 15px; width: 15px; border: 1px solid $accent; border-radius: 2px; display: inline-block; transition: all 0.2s $interpol; } } <label class="checkbox"> <input type="checkbox" /> <span></span> Label text </label>

更新:

下面的答案参考了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，并重定向单击事件。