小开

警告：在撰写本文时，以下情况是正确的，但与此同时，事情已经取得了进展。

AFAIK现代浏览器使用本机操作系统控件显示复选框，因此无法设置它们的样式。

小开

最佳答案

更新：

下面的答案引用了CSS 3广泛可用之前的状态。在现代浏览器（包括Internet Explorer 9及更高版本）中，使用您喜欢的样式创建复选框替换更简单，而无需使用JavaScript。

以下是一些有用的链接：

值得注意的是，根本问题没有改变。你仍然不能将样式（边框等）直接应用于复选框元素并使这些样式影响超文本标记语言复选框的显示。然而，改变的是，现在可以隐藏实际的复选框并将其替换为你自己的样式元素，只使用CSS。特别是，因为CSS现在有一个广泛支持的:checked选择器，你可以使你的替换正确地反映框的选中状态。

老答案

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

不难想象一种解决方法，您可以使用JavaScript在复选框上覆盖图像，并单击该图像导致选中真正的复选框。没有JavaScript的用户将看到默认复选框。

编辑后添加：这里是一个很好的剧本为你做这件事；它隐藏了真正的复选框元素，用样式跨度替换它，并重定向单击事件。

小开

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

.myCheckbox input {position: relative;z-index: -9999;}
.myCheckbox span {width: 20px;height: 20px;display: block;background: url("link_to_image");}
.myCheckbox input:checked + span {background: url("link_to_another_image");}

<label for="test">Label for my styled "checkbox"</label><label class="myCheckbox"><input type="checkbox" name="test" /><span></span></label>

小开

我认为最简单的方法是将label样式化并使checkbox不可见。

超文本标记语言

<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 */}

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

小开

你可以通过使用:after和:before伪类附带的新功能来实现相当酷的自定义复选框效果。这样做的好处是：你不需要向DOM添加任何东西，只需标准复选框。

请注意，这仅适用于兼容的浏览器。我相信这与某些浏览器不允许您在输入元素上设置:after和:before有关。不幸的是，这意味着目前仅支持WebKit浏览器。Firefox+Internet Explorer仍然允许复选框运行，只是未设置样式，这有望在未来改变（代码不使用供应商前缀）。

这是一个WebKit浏览器解决方案（Chrome，Safari，移动浏览器）

参见小提琴示例

$(function() {$('input').change(function() {$('div').html(Math.random());});});

/* Main Classes */.myinput[type="checkbox"]:before {position: relative;display: block;width: 11px;height: 11px;border: 1px solid #808080;content: "";background: #FFF;}
.myinput[type="checkbox"]:after {position: relative;display: block;left: 2px;top: -11px;width: 7px;height: 7px;border-width: 1px;border-style: solid;border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;content: "";background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);background-repeat: no-repeat;background-position: center;}
.myinput[type="checkbox"]:checked:after {background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);}
.myinput[type="checkbox"]:disabled:after {-webkit-filter: opacity(0.4);}
.myinput[type="checkbox"]:not(:disabled):checked:hover:after {background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);}
.myinput[type="checkbox"]:not(:disabled):hover:after {background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);border-color: #85A9BB #92C2DA #92C2DA #85A9BB;}
.myinput[type="checkbox"]:not(:disabled):hover:before {border-color: #3D7591;}
/* Large checkboxes */.myinput.large {height: 22px;width: 22px;}
.myinput.large[type="checkbox"]:before {width: 20px;height: 20px;}
.myinput.large[type="checkbox"]:after {top: -20px;width: 16px;height: 16px;}
/* Custom checkbox */.myinput.large.custom[type="checkbox"]:checked:after {background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);}
.myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after {background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%"><tr><td>Normal:</td><td><input type="checkbox" /></td><td><input type="checkbox" checked="checked" /></td><td><input type="checkbox" disabled="disabled" /></td><td><input type="checkbox" disabled="disabled" checked="checked" /></td></tr><tr><td>Small:</td><td><input type="checkbox" class="myinput" /></td><td><input type="checkbox" checked="checked" class="myinput" /></td><td><input type="checkbox" disabled="disabled" class="myinput" /></td><td><input type="checkbox" disabled="disabled" checked="checked" class="myinput" /></td></tr><tr><td>Large:</td><td><input type="checkbox" class="myinput large" /></td><td><input type="checkbox" checked="checked" class="myinput large" /></td><td><input type="checkbox" disabled="disabled" class="myinput large" /></td><td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /></td></tr><tr><td>Custom icon:</td><td><input type="checkbox" class="myinput large custom" /></td><td><input type="checkbox" checked="checked" class="myinput large custom" /></td><td><input type="checkbox" disabled="disabled" class="myinput large custom" /></td><td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /></td></tr></table>

Webkit风格的翻转开关小提琴奖励

$(function() {var f = function() {$(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');};$('input').change(f).trigger('change');});

body {font-family: arial;}
.flipswitch {position: relative;background: white;width: 120px;height: 40px;-webkit-appearance: initial;border-radius: 3px;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);outline: none;font-size: 14px;font-family: Trebuchet, Arial, sans-serif;font-weight: bold;cursor: pointer;border: 1px solid #ddd;}
.flipswitch:after {position: absolute;top: 5%;display: block;line-height: 32px;width: 45%;height: 90%;background: #fff;box-sizing: border-box;text-align: center;transition: all 0.3s ease-in 0s;color: black;border: #888 1px solid;border-radius: 3px;}
.flipswitch:after {left: 2%;content: "OFF";}
.flipswitch:checked:after {left: 53%;content: "ON";}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h2>Webkit friendly mobile-style checkbox/flipswitch</h2><input type="checkbox" class="flipswitch" /> &nbsp;<span></span><br><input type="checkbox" checked="checked" class="flipswitch" /> &nbsp;<span></span>

小开

您可以使用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>

和上面代码的文件。请注意，一些CSS在旧版本的浏览器中不起作用，但我相信那里有一些花哨的JavaScript示例！

小开

在文本前面添加图标的快速修复：

< asp:CheckBox... Text="< img src='/link/to/img.png' />My Text" />

小开

哎呀！所有这些变通方法都让我得出结论，如果你想设计它，超文本标记语言复选框有点糟糕。

作为一个预警，这不是一个CSS实现。我只是想分享我想出的解决方法，以防其他人可能会发现它很有用。

我使用了HTML5canvas元素。

这样做的好处是，您不必使用外部图像，并且可能会节省一些带宽。

缺点是，如果浏览器由于某种原因无法正确呈现它，那么就没有退路了。尽管这在2017年是否仍然是一个问题值得商榷。

更新

我发现旧代码很难看，所以我决定重写它。

Object.prototype.create = function(args){var retobj = Object.create(this);
retobj.constructor(args || null);
return retobj;}
var Checkbox = Object.seal({width: 0,height: 0,state: 0,document: null,parent: null,canvas: null,ctx: null,
/** args:* name      default             desc.** width     15                  width* height    15                  height* document  window.document     explicit document reference* target    this.document.body  target element to insert checkbox into*/constructor: function(args){if(args === null)args = {};
this.width = args.width || 15;this.height = args.height || 15;this.document = args.document || window.document;this.parent = args.target || this.document.body;this.canvas = this.document.createElement("canvas");this.ctx = this.canvas.getContext('2d');
this.canvas.width = this.width;this.canvas.height = this.height;this.canvas.addEventListener("click", this.ev_click(this), false);this.parent.appendChild(this.canvas);this.draw();},
ev_click: function(self){return function(unused){self.state = !self.state;self.draw();}},
draw_rect: function(color, offset){this.ctx.fillStyle = color;this.ctx.fillRect(offset, offset,this.width - offset * 2, this.height - offset * 2);},
draw: function(){this.draw_rect("#CCCCCC", 0);this.draw_rect("#FFFFFF", 1);
if(this.is_checked())this.draw_rect("#000000", 2);},
is_checked: function(){return !!this.state;}});

这是一个工作演示。

新版本使用原型和差异继承来创建一个高效的系统来创建复选框。要创建复选框：

var my_checkbox = Checkbox.create();

这将立即将复选框添加到DOM并连接事件。要查询是否选中复选框：

my_checkbox.is_checked(); // True if checked, else false

同样需要注意的是，我摆脱了循环。

更新2

在上一次更新中我没有提到的是，使用画布比仅仅制作一个看起来像你想要的复选框有更多的优势。如果你愿意，你也可以创建多州复选框。

Object.prototype.create = function(args){var retobj = Object.create(this);
retobj.constructor(args || null);
return retobj;}
Object.prototype.extend = function(newobj){var oldobj = Object.create(this);
for(prop in newobj)oldobj[prop] = newobj[prop];
return Object.seal(oldobj);}
var Checkbox = Object.seal({width: 0,height: 0,state: 0,document: null,parent: null,canvas: null,ctx: null,
/** args:* name      default             desc.** width     15                  width* height    15                  height* document  window.document     explicit document reference* target    this.document.body  target element to insert checkbox into*/constructor: function(args){if(args === null)args = {};
this.width = args.width || 15;this.height = args.height || 15;this.document = args.document || window.document;this.parent = args.target || this.document.body;this.canvas = this.document.createElement("canvas");this.ctx = this.canvas.getContext('2d');
this.canvas.width = this.width;this.canvas.height = this.height;this.canvas.addEventListener("click", this.ev_click(this), false);this.parent.appendChild(this.canvas);this.draw();},
ev_click: function(self){return function(unused){self.state = !self.state;self.draw();}},
draw_rect: function(color, offsetx, offsety){this.ctx.fillStyle = color;this.ctx.fillRect(offsetx, offsety,this.width - offsetx * 2, this.height - offsety * 2);},
draw: function(){this.draw_rect("#CCCCCC", 0, 0);this.draw_rect("#FFFFFF", 1, 1);this.draw_state();},
draw_state: function(){if(this.is_checked())this.draw_rect("#000000", 2, 2);},
is_checked: function(){return this.state == 1;}});
var Checkbox3 = Checkbox.extend({ev_click: function(self){return function(unused){self.state = (self.state + 1) % 3;self.draw();}},
draw_state: function(){if(this.is_checked())this.draw_rect("#000000", 2, 2);
if(this.is_partial())this.draw_rect("#000000", 2, (this.height - 2) / 2);},
is_partial: function(){return this.state == 2;}});

我稍微修改了最后一个片段中使用的Checkbox，使其更加通用，从而可以使用具有3种状态的复选框“扩展”它。这是一个演示。如您所见，它已经具有比内置复选框更多的功能。

在JavaScript和CSS之间进行选择时需要考虑的问题。

旧的、设计不良的代码

工作演示

首先，设置画布

var canvas = document.createElement('canvas'),ctx = canvas.getContext('2d'),checked = 0; // The state of the checkboxcanvas.width = canvas.height = 15; // Set the width and height of the canvasdocument.body.appendChild(canvas);document.body.appendChild(document.createTextNode(' Togglable Option'));

接下来，设计一种让画布自己更新的方法。

(function loop(){// Draws a borderctx.fillStyle = '#ccc';ctx.fillRect(0,0,15,15);ctx.fillStyle = '#fff';ctx.fillRect(1, 1, 13, 13);// Fills in canvas if checkedif(checked){ctx.fillStyle = '#000';ctx.fillRect(2, 2, 11, 11);}setTimeout(loop, 1000/10); // Refresh 10 times per second})();

最后一部分是使它具有交互性。幸运的是，它很简单：

canvas.onclick = function(){checked = !checked;}

这就是你在IE中可能遇到问题的地方，因为它们在JavaScript中的奇怪事件处理模型。

我希望这能帮助别人；它绝对适合我的需求。

小开

input[type=checkbox].css-checkbox {position: absolute;overflow: hidden;clip: rect(0 0 0 0);height: 1px;width: 1px;margin: -1px;padding: 0;border: 0;}
input[type=checkbox].css-checkbox + label.css-label {padding-left: 20px;height: 15px;display: inline-block;line-height: 15px;background-repeat: no-repeat;background-position: 0 0;font-size: 15px;vertical-align: middle;cursor: pointer;}
input[type=checkbox].css-checkbox:checked + label.css-label {background-position: 0 -15px;}
.css-label{background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);}

小开

我更喜欢使用图标字体（例如FontAwese），因为使用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。

小开

这是一个简单的CSS解决方案，没有任何jQuery或JavaScript代码。

我正在使用FontAwseome图标，但您可以使用任何图像

input[type=checkbox] {display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;visibility: hidden;font-size: 14px;}
input[type=checkbox]:before {content: @fa-var-square-o;visibility: visible;/*font-size: 12px;*/}
input[type=checkbox]:checked:before {content: @fa-var-check-square-o;}

小开

这是一个仅限CSS/超文本标记语言的版本，根本不需要jQuery或JavaScript，简单而干净的超文本标记语言和非常简单而简短的CSS。

这是JSFiddle

http://jsfiddle.net/v71kn3pr/

以下是超文本标记语言：

<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）、JavaServerFaces和ColdFusion进行了测试。

小开

开始之前（截至2015年1月）

原来的问题和答案现在已经有5年了。因此，这是一个更新。

首先，当涉及到样式复选框时，有许多方法。基本原则是：

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

解决方案（原则上）

上面的内容可以通过多种方式来完成——你会经常听到使用CSS3伪元素是正确的方法。实际上，没有真正的对或错的方法，这取决于最适合你将使用它的上下文的方法。也就是说，我有一个首选的方法。

将复选框包装在label元素中。这意味着即使它被隐藏，您仍然可以通过单击标签内的任何位置来切换其选中状态。
隐藏您的复选框。
在您将相应设置样式的复选框中添加一个新元素之后。它必须出现在复选框之后，以便可以使用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-family，例如到FontAwesome）

label input {display: none; /* Hide the default checkbox */}
/* Style the artificial checkbox */label span {height: 10px;width: 10px;border: 1px solid grey;display: inline-block;position: relative;}
/* Style its checked state...with a ticked icon */[type=checkbox]:checked + span:before {content: '\2714';position: absolute;top: -5px;left: 0;}

<label><input type='checkbox'><span></span>Checkbox label text</label>

小开

不，您仍然无法设置复选框本身的样式，但我（终于）想出了如何在单击复选框的保持功能时设置错觉的样式。这意味着即使光标不完全静止，您也可以切换它，而无需冒选择文本或触发拖放的风险！

这个解决方案可能也适合单选按钮。

以下代码适用于Internet Explorer 9、Firefox 30.0和Chrome40.0.2214.91，只是一个基本示例。您仍然可以将其与背景图像和伪元素结合使用。

http://jsfiddle.net/o0xo13yL/1/

label {display: inline-block;position: relative; /* Needed for checkbox absolute positioning */background-color: #eee;padding: .5rem;border: 1px solid #000;border-radius: .375rem;font-family: "Courier New";font-size: 1rem;line-height: 1rem;}
label > input[type="checkbox"] {display: block;position: absolute; /* Remove it from the flow */width: 100%;height: 100%;margin: -.5rem; /* Negative the padding of label to cover the "button" */cursor: pointer;opacity: 0; /* Make it transparent */z-index: 666; /* Place it on top of everything else */}
label > input[type="checkbox"] + span {display: inline-block;width: 1rem;height: 1rem;border: 1px solid #000;margin-right: .5rem;}
label > input[type="checkbox"]:checked + span {background-color: #666;}
<label><input type="checkbox" /><span>&nbsp;</span>Label text</label>

小开

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

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");}

超文本标记语言：

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

小开

~~我会遵循SW4的答案~~.不再是了：Volomike的回答远远优于这里的所有答案（注意我在答案评论中建议的改进）。如果你对这个答案评论的替代方法感到好奇，请继续阅读这个答案。

首先，隐藏复选框并用自定义跨度覆盖它，建议使用这种超文本标记语言：

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

包装标签整齐地允许单击文本，而无需“for-id”属性链接。但是，

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

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

Cobberboy的回答推荐字体很棒，它通常比位图更好，因为字体是可缩放的向量。使用上面的超文本标记语言，我建议以下CSS规则：

隐藏复选框
```
 input[type="checkbox"] {position: absolute;opacity: 0;z-index: -1;}
```
我只使用负0，因为我的例子使用了足够大的复选框皮肤来完全覆盖它。我不推荐left: -999px，因为它不能在每个布局中重用。Bushan wagh的回答提供了一种防弹的方法来隐藏它并说服浏览器使用tabindex，所以这是一个很好的选择。无论如何，两者都只是一个黑客。今天正确的方法是appearance: none，参见Joost的回答：
```
 input[type="checkbox"] {appearance: none;-webkit-appearance: none;-moz-appearance: none;}
```

样式复选框标签

 input[type="checkbox"] + span {font: 16pt sans-serif;color: #000;}

添加复选框皮肤

 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是字体真棒的square-o，填充被调整为在焦点上提供均匀的虚线轮廓（见下文）。

添加复选框选中的皮肤

 input[type="checkbox"]:checked + span:before {content: '\00f046';}

\00f046是字体真棒的check-square-o，它与square-o的宽度不同，这就是上面宽度样式的原因。

添加焦点轮廓
```
 input[type="checkbox"]:focus + span:before {outline: 1px dotted #aaa;}
```
Safari不提供此功能（请参阅@Jason Sankey的评论），请参阅这个答案 forSafari-Only CSS

为禁用复选框设置灰色

 input[type="checkbox"]:disabled + span {color: #999;}

在非禁用复选框上设置悬停阴影

 input[type="checkbox"]:not(:disabled) + span:hover:before {text-shadow: 0 1px 2px #77F;}

在jsfiddle上测试

尝试将鼠标悬停在复选框上，使用Tab和Shift+Tab移动，使用空间切换。

小开

最近我发现了一个非常有趣的解决方案。

您可以使用appearance: none;关闭复选框的默认样式，然后像这里（例4）所描述的那样在其上编写自己的样式。

input[type=checkbox] {width: 23px;height: 23px;-webkit-appearance: none;-moz-appearance: none;appearance: none;margin-right: 10px;background-color: #878787;outline: 0;border: 0;display: inline-block;-webkit-box-shadow: none !important;-moz-box-shadow: none !important;box-shadow: none !important;}
input[type=checkbox]:focus {outline: none;border: none !important;-webkit-box-shadow: none !important;-moz-box-shadow: none !important;box-shadow: none !important;}
input[type=checkbox]:checked {background-color: green;text-align: center;line-height: 15px;}

<input type="checkbox">

Unfortunately browser support is quite bad for the appearance option. From my personal testing I only got Opera and Chrome working correctly. But this would be the way to go to keep it simple when better support comes or you only want to use Chrome/Opera.

Example JSFiddle

"Can I use?" link

小开

我总是使用伪元素:before和:after来改变复选框和单选按钮的外观。它的工作就像一个魅力。

参考此<景点>链接获取更多信息

CODEPEN

步骤

使用css规则隐藏默认复选框，如visibility:hidden或opacity:0或position:absolute;left:-9999px等。
使用:before元素创建一个假复选框并传递一个空的或不间断的空格'\00a0'；
当复选框处于:checked状态时，传递Unicodecontent: "\2713"，这是一个复选标记；
添加:focus样式以使复选框可访问。
成交

我是这样做的。

.box {background: #666666;color: #ffffff;width: 250px;padding: 10px;margin: 1em auto;}p {margin: 1.5em 0;padding: 0;}input[type="checkbox"] {visibility: hidden;}label {cursor: pointer;}input[type="checkbox"] + label:before {border: 1px solid #333;content: "\00a0";display: inline-block;font: 16px/1em sans-serif;height: 16px;margin: 0 .25em 0 0;padding: 0;vertical-align: top;width: 16px;}input[type="checkbox"]:checked + label:before {background: #fff;color: #333;content: "\2713";text-align: center;}input[type="checkbox"]:checked + label:after {font-weight: bold;}
input[type="checkbox"]:focus + label::before {outline: rgb(59, 153, 252) auto 5px;}

<div class="content"><div class="box"><p><input type="checkbox" id="c1" name="cb"><label for="c1">Option 01</label></p><p><input type="checkbox" id="c2" name="cb"><label for="c2">Option 02</label></p><p><input type="checkbox" id="c3" name="cb"><label for="c3">Option 03</label></p></div></div>

使用#0和#1更时尚

body{font-family: sans-serif;}
.container {margin-top: 50px;margin-left: 20px;margin-right: 20px;}.checkbox {width: 100%;margin: 15px auto;position: relative;display: block;}
.checkbox input[type="checkbox"] {width: auto;opacity: 0.00000001;position: absolute;left: 0;margin-left: -20px;}.checkbox label {position: relative;}.checkbox label:before {content: '';position: absolute;left: 0;top: 0;margin: 4px;width: 22px;height: 22px;transition: transform 0.28s ease;border-radius: 3px;border: 2px solid #7bbe72;}.checkbox label:after {content: '';display: block;width: 10px;height: 5px;border-bottom: 2px solid #7bbe72;border-left: 2px solid #7bbe72;-webkit-transform: rotate(-45deg) scale(0);transform: rotate(-45deg) scale(0);transition: transform ease 0.25s;will-change: transform;position: absolute;top: 12px;left: 10px;}.checkbox input[type="checkbox"]:checked ~ label::before {color: #7bbe72;}
.checkbox input[type="checkbox"]:checked ~ label::after {-webkit-transform: rotate(-45deg) scale(1);transform: rotate(-45deg) scale(1);}
.checkbox label {min-height: 34px;display: block;padding-left: 40px;margin-bottom: 0;font-weight: normal;cursor: pointer;vertical-align: sub;}.checkbox label span {position: absolute;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}.checkbox input[type="checkbox"]:focus + label::before {outline: 0;}

<div class="container"><div class="checkbox"><input type="checkbox" id="checkbox" name="" value=""><label for="checkbox"><span>Checkbox</span></label></div>
<div class="checkbox"><input type="checkbox" id="checkbox2" name="" value=""><label for="checkbox2"><span>Checkbox</span></label></div></div>

小开

您可以使用iCheck。它是jQuery和Zepto的自定义复选框和单选按钮，也许它会对您有所帮助。

确保在icheck.js之前加载jQuery v1.7+

选择配色，有10种不同的风格可供选择：
- 黑色-minimal.css
- 红色-red.css
- 绿色-green.css
- 蓝色-blue.css
- 航空-aero.css
- 灰色-grey.css
- 橙色-orange.css
- 黄色-yellow.css
- 粉色-pink.css
- 紫色-purple.css
将 /skins/minimal/文件夹和icheck.js文件复制到您的网站。

在您的超文本标记语言之前插入（替换您的路径和配色方案）：

<link href="your-path/minimal/color-scheme.css" rel="stylesheet"><script src="your-path/icheck.js"></script>

红色配色示例：

<link href="your-path/minimal/red.css" rel="stylesheet"><script src="your-path/icheck.js"></script>

Add some checkboxes and radio buttons to your HTML:

<input type="checkbox"><input type="checkbox" checked><input type="radio" name="iCheck"><input type="radio" name="iCheck" checked>

Add JavaScript to your HTML to launch iCheck plugin:

<script>$(document).ready(function(){$('input').iCheck({checkboxClass: 'icheckbox_minimal',radioClass: 'iradio_minimal',increaseArea: '20%' // Optional});});</script>

For different from black color schemes use this code (example for Red):

<script>$(document).ready(function(){$('input').iCheck({checkboxClass: 'icheckbox_minimal-red',radioClass: 'iradio_minimal-red',increaseArea: '20%' // Optional});});</script>

Done

小开

不需要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链接

小开

使用纯CSS修改复选框样式。这不需要任何JavaScript或超文本标记语言操作：

.form input[type="checkbox"]:before {display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;content: "\f096";opacity: 1 !important;margin-top: -25px;appearance: none;background: #fff;}
.form input[type="checkbox"]:checked:before {content: "\f046";}
.form input[type="checkbox"] {font-size: 22px;appearance: none;-webkit-appearance: none;-moz-appearance: none;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form class="form"><input type="checkbox" /></form>

小开

易于实施且易于定制的解决方案

经过大量的搜索和测试，我得到了这个解决方案，它易于实现，易于定制。在这个解决方案：

您不需要外部库和文件
你不需要添加页面中的超文本标记语言
您不需要更改复选框名称和id

简单地将流动的CSS放在页面顶部，所有复选框的样式都会像这样改变：

input[type=checkbox] {transform: scale(1.5);}
input[type=checkbox] {width: 30px;height: 30px;margin-right: 8px;cursor: pointer;font-size: 17px;visibility: hidden;}
input[type=checkbox]:after,input[type=checkbox]::after {content: " ";background-color: #fff;display: inline-block;margin-left: 10px;padding-bottom: 5px;color: #00BFF0;width: 22px;height: 25px;visibility: visible;border: 1px solid #00BFF0;padding-left: 3px;border-radius: 5px;}
input[type=checkbox]:checked:after,input[type=checkbox]:checked::after {content: "\2714";padding: -5px;font-weight: bold;}

<input type="checkbox" id="checkbox1" /><label for="checkbox1">Checkbox</label>

小开

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

input[type="checkbox"] {-webkit-appearance: none;-moz-appearance: none;appearance: none;
/* Styling checkbox */width: 16px;height: 16px;background-color: red;}
input[type="checkbox"]:checked {background-color: green;}

<input type="checkbox" />

小开

一个简单而轻量级的模板：

input[type=checkbox] {cursor: pointer;}
input[type=checkbox]:checked:before {content: "\2713";background: #fffed5;text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);font-size: 20px;text-align: center;line-height: 8px;display: inline-block;width: 13px;height: 15px;color: #00904f;border: 1px solid #cdcdcd;border-radius: 4px;margin: -3px -3px;text-indent: 1px;}
input[type=checkbox]:before {content: "\202A";background: #ffffff;text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);font-size: 20px;text-align: center;line-height: 8px;display: inline-block;width: 13px;height: 15px;color: #00904f;border: 1px solid #cdcdcd;border-radius: 4px;margin: -3px -3px;text-indent: 1px;}

<input type="checkbox" checked="checked">checked1<br><input type="checkbox">unchecked2<br><input type="checkbox" checked="checked" id="id1"><label for="id1">checked2+label</label><br><label for="id2">unchecked2+label+rtl</label><input type="checkbox" id="id2"><br>

https://jsfiddle.net/rvgccn5b/

小开

由于Edge和Firefox等浏览器在复选框输入标签上不支持：之前：之后，这里有一个纯粹使用超文本标记语言和CSS的替代方案。当然，您应该根据您的要求编辑CSS。

使复选框的超文本标记语言如下所示：

<div class='custom-checkbox'><input type='checkbox' /><label><span></span>Checkbox label</label></div>

将此样式应用于复选框以更改颜色标签

<style>.custom-checkbox {position: relative;}.custom-checkbox input{position: absolute;left: 0;top: 0;height:15px;width: 50px;    /* Expand the checkbox so that it covers */z-index : 1;    /* the label and span, increase z-index to bring it over */opacity: 0;     /* the label and set opacity to 0 to hide it. */}.custom-checkbox input+label {position: relative;left: 0;top: 0;padding-left: 25px;color: black;}.custom-checkbox input+label span {position: absolute;  /* a small box to display as checkbox */left: 0;top: 0;height: 15px;width: 15px;border-radius: 2px;border: 1px solid black;background-color: white;}.custom-checkbox input:checked+label { /* change label color when checked */color: orange;}.custom-checkbox input:checked+label span{ /* change span box color when checked */background-color: orange;border: 1px solid orange;}</style>

小开

似乎您可以仅使用CSS更改灰度复选框的颜色。

下面将复选框从黑色转换为灰色（这是我想要的）：

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

小开

我的解决方案

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>

小开

从我的谷歌搜索中，这是复选框样式的最简单方法。只需根据您的设计添加: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>

小开

使用纯CSS，没有:before和:after的花哨，没有转换，您可以关闭默认外观，然后使用内联背景图像设置样式，如下例所示。这适用于Chrome、Firefox、Safari和现在的Edge（ChromiumEdge）。

INPUT[type=checkbox]:focus{outline: 1px solid rgba(0, 0, 0, 0.2);}
INPUT[type=checkbox]{background-color: #DDD;border-radius: 2px;appearance: none;-webkit-appearance: none;-moz-appearance: none;width: 17px;height: 17px;cursor: pointer;position: relative;top: 5px;}
INPUT[type=checkbox]:checked{background-color: #409fd6;background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;}

<form><label><input type="checkbox"> I Agree To Terms &amp; Conditions</label></form>

小开

您可以简单地在现代浏览器上使用appearance: none，这样就没有默认样式，并且您的所有样式都被正确应用：

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自定义复选框（WebKit浏览器解决方案仅Chrome，Safari，移动浏览器）

<input type="checkbox" id="cardAccptance" name="cardAccptance" value="Yes"><label for="cardAccptance" class="bold"> Save Card for Future Use</label>

css：

    /* The checkbox-cu */    
.checkbox-cu {display: block;position: relative;padding-left: 35px;margin-bottom: 0;cursor: pointer;font-size: 16px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}    
    
/* Hide the browser's default checkbox-cu */    
.checkbox-cu input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}    
    
/* Create a custom checkbox-cu */    
.checkmark {position: absolute;top: 4px;left: 0;height: 20px;width: 20px;background-color: #eee;border: 1px solid #999;border-radius: 0;box-shadow: none;}    
    
/* On mouse-over, add a grey background color */    
.checkbox-cu:hover input~.checkmark {background-color: #ccc;}    
    
/* When the checkbox-cu is checked, add a blue background */    
.checkbox-cu input:checked~.checkmark {background-color: transparent;}    
    
/* Create the checkmark/indicator (hidden when not checked) */    
.checkmark:after {content: "";position: absolute;display: none;}    
    
/* Show the checkmark when checked */    
.checkbox-cu input:checked~.checkmark:after {display: block;}    
    
/* Style the checkmark/indicator */    
.checkbox-cu .checkmark::after {left: 7px;top: 3px;width: 6px;height: 9px;border: solid #28a745;border-width: 0 2px 2px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);z-index: 100;}

小开

2022无障碍解决方案-使用`accent-color`

2022更新：使用新的#0属性并确保满足适当的对比度 of 3:1以确保可访问性。这也适用于radio按钮。

.red-input {accent-color: #9d3039;height: 20px; /* not needed */width: 20px; /* not needed */}

<input class="red-input" type="checkbox" />
<!-- Radio button example --><input class="red-input" type="radio" />

老答案：

我一直在滚动和滚动，这些答案中的吨只是以一种以上的方式将可访问性抛出门外，违反网页内容无障碍指南。我投入了单选按钮，因为大多数时候当你使用自定义复选框时，你也想要自定义单选按钮。

小提琴：

复选框-纯CSS-从第3方库免费
单选按钮-纯CSS-从第3方库免费
复选框*，使用字体很棒，但可以很容易地与Glyphicons等交换

派对迟到了，但不知何故，这在~~2019~~，~~2020~~,2021年仍然很困难，所以我添加了我的三个解决方案，分别是无障碍和容易。

这些都是JavaScript免费、无障碍和外部库免费*…

如果你想即插即用，只需从小提琴复制样式表，编辑CSS中的颜色代码以满足您的需求，然后就可以了。如果你想为复选框添加一个自定义的svg复选标记图标。我为那些非CSS的人添加了很多评论。

如果您有长文本或小容器，并且遇到复选框或单选按钮输入下方的文本换行，则只需转换为div像这样。

较长的解释：我需要一个不违反网页内容无障碍指南的解决方案，不依赖于JavaScript或外部库，并且不会破坏键盘导航，如选项卡或空格键选择，允许焦点事件，一个允许选中和未选中的禁用复选框的解决方案，最后一个解决方案，我可以自定义复选框的外观，但是我想要不同的background-color，border-radius，svg背景等。

我使用了@Jan Turos的这个答案组合来想出我自己的解决方案，似乎效果很好。我做了一个单选按钮小提琴，它使用了复选框中的许多相同代码，以便在单选按钮上也能使用。

我还在学习可访问性，所以如果我错过了什么，请留下评论，我会试着纠正它。

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

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 themesbox-shadow will be hidden in these modes andtransparency will not be hidden in high-contrastthus box-shadow will not show but the outline willproviding 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>

小开

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>

小开

这是一个支持主题的示例。这是一种带有CSS转换的现代方法。绝对不需要JavaScript。

我导出了以下代码链接在这个评论；关于一个相关的问题。

编辑：我添加了单选按钮，作为maxshity表明。

const selector = '.grid-container > .grid-row > .grid-col[data-theme="retro"]';const main = () => {new CheckboxStyler().run(selector);new RadioStyler().run(selector);};
/** This is only used to add the wrapper class and checkmark span to an existing DOM,* to make this CSS work.*/class AbstractInputStyler {constructor(options) {this.opts = options;}run(parentSelector) {let wrapperClass = this.opts.wrapperClass;let parent = document.querySelector(parentSelector) || document.getElementsByTagName('body')[0];let labels = parent.querySelectorAll('label');if (labels.length) labels.forEach(label => {if (label.querySelector(`input[type="${this.opts._inputType}"]`)) {if (!label.classList.contains(wrapperClass)) {label.classList.add(wrapperClass);label.appendChild(this.__createDefaultNode());}}});return this;}/* @protected */__createDefaultNode() {let checkmark = document.createElement('span');checkmark.className = this.opts._activeClass;return checkmark;}}
class CheckboxStyler extends AbstractInputStyler {constructor(options) {super(Object.assign({_inputType: 'checkbox',_activeClass: 'checkmark'}, CheckboxStyler.defaultOptions, options));}}CheckboxStyler.defaultOptions = {wrapperClass: 'checkbox-wrapper'};
class RadioStyler extends AbstractInputStyler {constructor(options) {super(Object.assign({_inputType: 'radio',_activeClass: 'pip'}, RadioStyler.defaultOptions, options));}}RadioStyler.defaultOptions = {wrapperClass: 'radio-wrapper'};
main();

/* Theming */
:root {--background-color: #FFF;--font-color: #000;--checkbox-default-background: #EEE;--checkbox-hover-background: #CCC;--checkbox-disabled-background: #AAA;--checkbox-selected-background: #1A74BA;--checkbox-selected-disabled-background: #6694B7;--checkbox-checkmark-color: #FFF;--checkbox-checkmark-disabled-color: #DDD;}
[data-theme="dark"] {--background-color: #111;--font-color: #EEE;--checkbox-default-background: #222;--checkbox-hover-background: #444;--checkbox-disabled-background: #555;--checkbox-selected-background: #2196F3;--checkbox-selected-disabled-background: #125487;--checkbox-checkmark-color: #EEE;--checkbox-checkmark-disabled-color: #999;}
[data-theme="retro"] {--background-color: #FFA;--font-color: #000;--checkbox-default-background: #EEE;--checkbox-hover-background: #FFF;--checkbox-disabled-background: #BBB;--checkbox-selected-background: #EEE;--checkbox-selected-disabled-background: #BBB;--checkbox-checkmark-color: #F44;--checkbox-checkmark-disabled-color: #D00;}

/* General styles */
html {width: 100%;height: 100%;}
body {/*background: var(--background-color); -- For demo, moved to column. *//*color:      var(--font-color);       -- For demo, moved to column. */background: #777;width: calc(100% - 0.5em);height: calc(100% - 0.5em);padding: 0.25em;}
h1 {font-size: 1.33em !important;}
h2 {font-size: 1.15em !important;margin-top: 1em;}

/* Grid style - using flex */
.grid-container {display: flex;height: 100%;flex-direction: column;flex: 1;}
.grid-row {display: flex;flex-direction: row;flex: 1;margin: 0.25em 0;}
.grid-col {display: flex;flex-direction: column;height: 100%;padding: 0 1em;flex: 1;margin: 0 0.25em;/* If not demo, remove and uncomment the body color rules */background: var(--background-color);color: var(--font-color);}
.grid-cell {width: 100%;height: 100%;}

/* The checkbox wrapper */
.checkbox-wrapper,.radio-wrapper {display: block;position: relative;padding-left: 1.5em;margin-bottom: 0.5em;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

/* Hide the browser's default checkbox and radio buttons */
.checkbox-wrapper input[type="checkbox"] {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.radio-wrapper input[type="radio"] {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}

/* Create a custom checkbox */
.checkbox-wrapper .checkmark {position: absolute;top: 0;left: 0;height: 1em;width: 1em;background-color: var(--checkbox-default-background);transition: all 0.2s ease-in;}
.radio-wrapper .pip {position: absolute;top: 0;left: 0;height: 1em;width: 1em;border-radius: 50%;background-color: var(--checkbox-default-background);transition: all 0.2s ease-in;}

/* Disabled style */
.checkbox-wrapper input[type="checkbox"]:disabled~.checkmark,.radio-wrapper input[type="radio"]:disabled~.pip {cursor: not-allowed;background-color: var(--checkbox-disabled-background);color: var(--checkbox-checkmark-disabled-color);}
.checkbox-wrapper input[type="checkbox"]:disabled~.checkmark:after,.radio-wrapper input[type="radio"]:disabled~.pip:after {color: var(--checkbox-checkmark-disabled-color);}
.checkbox-wrapper input[type="checkbox"]:disabled:checked~.checkmark,.radio-wrapper input[type="radio"]:disabled:checked~.pip {background-color: var(--checkbox-selected-disabled-background);}

/* On mouse-over, add a grey background color */
.checkbox-wrapper:hover input[type="checkbox"]:not(:disabled):not(:checked)~.checkmark,.radio-wrapper:hover input[type="radio"]:not(:disabled):not(:checked)~.pip {background-color: var(--checkbox-hover-background);}

/* When the checkbox is checked, add a blue background */
.checkbox-wrapper input[type="checkbox"]:checked~.checkmark,.radio-wrapper input[type="radio"]:checked~.pip {background-color: var(--checkbox-selected-background);}

/* Create the checkmark/indicator (hidden when not checked) */
.checkbox-wrapper .checkmark:after {display: none;width: 100%;position: absolute;text-align: center;content: "\2713";color: var(--checkbox-checkmark-color);line-height: 1.1em;}
.radio-wrapper .pip:after {display: none;width: 100%;position: absolute;text-align: center;content: "\2022";color: var(--checkbox-checkmark-color);font-size: 1.5em;top: -0.2em;}

/* Show the checkmark when checked */
.checkbox-wrapper input[type="checkbox"]:checked~.checkmark:after {display: block;line-height: 1.1em;}
.radio-wrapper input[type="radio"]:checked~.pip:after {display: block;line-height: 1.1em;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" /><div class="grid-container"><div class="grid-row"><div class="grid-col"><div class="grid-cell"><h1>Pure CSS</h1><h2>Checkbox</h2><label class="checkbox-wrapper">One<input type="checkbox" checked="checked"><span class="checkmark"></span></label><label class="checkbox-wrapper">Two<input type="checkbox"><span class="checkmark"></span></label><label class="checkbox-wrapper">Three<input type="checkbox" checked disabled><span class="checkmark"></span></label><label class="checkbox-wrapper">Four<input type="checkbox" disabled><span class="checkmark"></span></label><h2>Radio</h2><label class="radio-wrapper">One<input type="radio" name="group-x"><span class="pip"></span></label><label class="radio-wrapper">Two<input type="radio" name="group-x"><span class="pip"></span></label><label class="radio-wrapper">Three<input type="radio" name="group-x" checked disabled><span class="pip"></span></label><label class="radio-wrapper">Four<input type="radio" name="group-x" disabled><span class="pip"></span></label></div></div><div class="grid-col" data-theme="dark"><div class="grid-cell"><h1>Pure CSS</h1><h2>Checkbox</h2><label class="checkbox-wrapper">One<input type="checkbox" checked="checked"><span class="checkmark"></span></label><label class="checkbox-wrapper">Two<input type="checkbox"><span class="checkmark"></span></label><label class="checkbox-wrapper">Three<input type="checkbox" checked disabled><span class="checkmark"></span></label><label class="checkbox-wrapper">Four<input type="checkbox" disabled><span class="checkmark"></span></label><h2>Radio</h2><label class="radio-wrapper">One<input type="radio" name="group-y"><span class="pip"></span></label><label class="radio-wrapper">Two<input type="radio" name="group-y"><span class="pip"></span></label><label class="radio-wrapper">Three<input type="radio" name="group-y" checked disabled><span class="pip"></span></label><label class="radio-wrapper">Four<input type="radio" name="group-y" disabled><span class="pip"></span></label></div></div><div class="grid-col" data-theme="retro"><div class="grid-cell"><h1>JS + CSS</h1><h2>Checkbox</h2><label>One   <input type="checkbox" checked="checked"></label><label>Two   <input type="checkbox"></label><label>Three <input type="checkbox" checked disabled></label><label>Four  <input type="checkbox" disabled></label><h2>Radio</h2><label>One   <input type="radio" name="group-z" checked="checked"></label><label>Two   <input type="radio" name="group-z"></label><label>Three <input type="radio" name="group-z" checked disabled></label><label>Four  <input type="radio" name="group-z" disabled></label></div></div></div></div>

小开

这是一个现代版本，带有一点动画和简单的样式，您可以自定义：

.checkbox {position: relative;width: 20px;height: 20px;-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;appearance: none;background: transparent;border: 2px solid #7C7A7D;border-radius: 5px;margin: 0;outline: none;transition: 0.5s ease;opacity: 0.8;cursor: pointer;}

.checkbox:checked {border-color: #7C7A7D;background-color: #7C7A7D;}

.checkbox:checked:before {position: absolute;left: 2px;top: -4px;display: block;content: '\2713';text-align: center;color: #FFF;font-family: Arial;font-size: 14px;font-weight: 800;}

.checkbox:hover {opacity: 1.0;transform: scale(1.05);}

小开

通过将物化与自定义样式表一起使用，您可以实现以下内容：

css代码

.custom_checkbox[type="checkbox"]:checked + span:not(.lever)::before {border: 2px solid transparent;border-bottom: 2px solid #ffd600;border-right: 2px solid #ffd600;background: transparent;}

超文本标记语言代码

<label><input type="checkbox" class="custom_checkbox" /><span>Text</span></label>

Demo

JSFiddle演示

小开

这将使虚线边框以及背景成为您的搜索，此外，如果您想在选中时设置特定的背景颜色，只需在下面的示例中为您的问题设置适当的位置：）此解决方案还设置自定义复选标记图标等。

对于像这样的html元素：<input type="checkbox" />

input[type='checkbox']:checked {background-color: rgb(60,69,77,0.9);}input[type='checkbox']:checked:after {content: '\2713';color:white;}input[type='checkbox']{background:#ff0000;text-align: center;display: table-cell;vertical-align: middle;width: 20px !important;height: 20px !important;appearance:none;border-radius:10%;border: 1px dotted rgb(60,69,77,0.9);box-shadow: none;font-size: 1em;}

小开

CSS基本用户界面模块4级通过一个名为accent-color的新解决方案（最终）增加了对此的支持，它的实际上非常简单，与这里的几乎所有其他答案不同：

input {accent-color: rebeccapurple;}

<input type="checkbox" />

Simply set whatever CSS color (e.g. named value, hex code, etc.) you want in as the value of accent-color, and it will be applied.

This currently works in Chrome (v93+), Edge (v93+), Firefox (v92+), Opera (v79+), and Safari (v15.4+).

Note: Edge, Chrome, and Opera (and possibly Safari; I can't test that) currently don't support alpha channel values via rgba() either (the RGB values of rgba() will still "work"; the alpha channel will simply be ignored by the browser). See MDN Browser Support for more information.

小开

<!DOCTYPE html><html><style>/* The container */.container {display: block;position: relative;padding-left: 35px;margin-bottom: 12px;cursor: pointer;font-size: 22px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
/* Hide the browser's default checkbox */.container input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
/* Create a custom checkbox */.checkmark {position: absolute;top: 0;left: 0;height: 25px;width: 25px;background-color: white;border: 2px solid red;}
/* On mouse-over, add a grey background color */.container:hover input ~ .checkmark {background-color: #ccc;}
/* When the checkbox is checked, add a white background */.container input:checked ~ .checkmark {background-color: white;}
/* Create the checkmark/indicator (hidden when not checked) */.checkmark:after {content: "";position: absolute;display: none;}
/* Show the checkmark when checked */.container input:checked ~ .checkmark:after {display: block;}
/* Style the checkmark/indicator */.container .checkmark:after {left: 9px;top: 5px;width: 5px;height: 10px;border: solid green;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}</style><body>
<h1>Custom Checkboxes</h1><label class="container">One<input type="checkbox" checked="checked"><span class="checkmark"></span></label><label class="container">Two<input type="checkbox"><span class="checkmark"></span></label><label class="container">Three<input type="checkbox"><span class="checkmark"></span></label><label class="container">Four<input type="checkbox"><span class="checkmark"></span></label>
</body></html>

小开

隐藏输入并在创建复选框等效的下一个元素中添加前

input[type="checkbox"] {display: none;}
input[type="checkbox"] + label:before {content:'';-webkit-appearance: none;background-color: transparent;border: 2px solid #0079bf;box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);padding: 10px;display: inline-block;position: relative;vertical-align: middle;cursor: pointer;margin-right: 5px;background-color:red;}
input[type="checkbox"]:checked + label:before {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");}

小开

这帮助我更改复选框的样式（颜色）

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

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

小开

现在可以仅使用CSS更改复选框的所有颜色：

如前所述，最近的accent-color CSS属性对于更改检查时的复选框颜色很有用。
但是，我没有看到其他人提到的是，当复选框为未经检查时，如果您使用CSS的filter属性，您可以更改背景颜色和/或边框。

对于简单的更改，您可以使用brightness将白色背景颜色变暗变为灰色或黑色，并且使用hue-rotate可以为边框提供颜色（至少在Firefox中）。但是，如果您想将背景完全更改为任何颜色，您也可以使用filters这样做，但是您必须根据问题中的方法组合多个过滤器：如何仅使用CSS过滤器将黑色转换为任何给定的颜色

幸运的是，这种复杂的方法似乎适用于所有浏览器，并且可以使用生成器来计算您想要的任何颜色所需的filters：https://codepen.io/jumarjuaton/full/mdJYWYq（此链接专门从白色转换，与上面链接的问题不同）

请看下面的例子：

/* Disable 'filters' while checked since they impact 'accent-color'. */input[type='checkbox']:checked {filter: none;}input[type='radio']:checked {filter: none;}
/*** We use 'accent-color' for colors in the checked stated and we use* 'filter' to change the background colors in the unchecked state.*/.red-bg-input {accent-color: red;filter: invert(85%) sepia(83%) saturate(6726%) hue-rotate(360deg) brightness(111%) contrast(111%);}
.green-bg-input {accent-color: green;filter: invert(49%) sepia(65%) saturate(7149%) hue-rotate(92deg) brightness(89%) contrast(103%);}
.blue-bg-input {accent-color: blue;filter: invert(30%) sepia(99%) saturate(6101%) hue-rotate(202deg) brightness(52%) contrast(136%);}
.teal-bg-input {accent-color: teal;filter: invert(58%) sepia(77%) saturate(3139%) hue-rotate(157deg) brightness(89%) contrast(101%)}
.dark-input {accent-color: black;filter: brightness(0%) saturate(100) hue-rotate(25deg);}
.gray-input {accent-color: purple;filter: brightness(60%) saturate(100) hue-rotate(25deg);}
.orange-bg-input {accent-color: orange;filter: invert(63%) sepia(28%) saturate(7249%) hue-rotate(0deg) brightness(103%) contrast(105%);}

<input type="checkbox" /><input type="checkbox" checked/><input type="radio" /><input type="radio" checked />Defaults
<br><input class="red-bg-input" type="checkbox" /><input class="red-bg-input" type="checkbox" checked/><input class="red-bg-input" type="radio" /><input class="red-bg-input" type="radio" checked/>Red
<br><input class="green-bg-input" type="checkbox" /><input class="green-bg-input" type="checkbox" checked/><input class="green-bg-input" type="radio" /><input class="green-bg-input" type="radio" checked/>Green
<br><input class="blue-bg-input" type="checkbox" /><input class="blue-bg-input" type="checkbox" checked/><input class="blue-bg-input" type="radio" /><input class="blue-bg-input" type="radio" checked/>Blue
<br><input class="teal-bg-input" type="checkbox" /><input class="teal-bg-input" type="checkbox" checked/><input class="teal-bg-input" type="radio" /><input class="teal-bg-input" type="radio" checked/>Teal
<br><input class="orange-bg-input" type="checkbox" /><input class="orange-bg-input" type="checkbox" checked/><input class="orange-bg-input" type="radio" /><input class="orange-bg-input" type="radio" checked/>Orange
<br><input class="dark-input" type="checkbox" /><input class="dark-input" type="checkbox" checked/><input class="dark-input" type="radio" /><input class="dark-input" type="radio" checked/>Black/dark
<br><input class="gray-input" type="checkbox" /><input class="gray-input" type="checkbox" checked/><input class="gray-input" type="radio" /><input class="gray-input" type="radio" checked/>Purple + Gray background

小开

#0

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

如何使用CSS设置复选框的样式

更新

更新2