blocks|key|1315369|text|警告：在撰写本文时，以下情况是正确的，但与此同时，事情已经取得了进展。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1315370|AFAIK现代浏览器使用本机OS控件显示复选框，因此无法设置它们的样式。|1315371|entityMap^0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

<p><strong>Warning</strong>: the following was true at the time of writing, but in the meantime things have progressed.</p>

<p>AFAIK modern browsers display checkboxes using the native OS control, so there's no way to style them.</p>


blocks|key|1313506|text|更新：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1313507|在现代浏览器(包括Internet+Explorer9和更高版本)中，使用您喜欢的样式创建checkbox替换会更简单，而不使用JavaScript。|1313508|以下是一些有用的链接：|1313509|1313510|Creating+Custom+Form+Checkboxes+with+Just+CSS|unordered-list-item|offset|length|1313511|Easy+CSS+Checkbox+Generator|1313512|Stuff+You+Can+Do+With+The+Checkbox+Hack|1313513|Implementing+Custom+Checkboxes+and+Radio+Buttons+with+CSS3|1313514|How+to+Style+a+Checkbox+With+CSS|1313515|1313516|值得注意的是，根本问题没有改变。您仍然不能应用样式(边框等)直接绑定到checkbox元素，并使这些样式影响HTML复选框的显示。然而，改变的是，现在可以隐藏实际的复选框，并将其替换为您自己的样式元素，只使用CSS。特别是，因为CSS现在有一个被广泛支持的:checked选择器，你可以让你的替换项正确地反映框的选中状态。|style|CODE|1313517|1313518|较旧的答案|1313519|这是a+useful+article+about+styling+checkboxes。基本上，该作者发现它在不同的浏览器之间有很大的不同，而且无论您如何设置样式，许多浏览器都会显示默认的复选框。所以真的没有一种简单的方法。|1313520|不难想象有一种变通方法，你可以使用JavaScript在复选框上叠加一个图像，然后点击该图像就会选中真正的复选框。没有使用JavaScript的用户将看到default复选框。|1313521|编辑后添加:这里是a+nice+script+that+does+this+for+you；它隐藏了真正的checkbox元素，用一个带样式的跨度替换它，并重定向单击事件。|1313522|entityMap|0|LINK|mutability|MUTABLE|url|http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/|1|http://csscheckbox.com/|2|http://css-tricks.com/the-checkbox-hack/|3|http://www.css3.com/implementing-custom-checkboxes-and-radio-buttons-with-css3/|4|https://www.paulund.co.uk/how-to-style-a-checkbox-with-css|5|http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/|6|https://web.archive.org/web/20160430165815/http://ryanfait.com:80/resources/custom-checkboxes-and-radio-buttons/#^0|0|0|0|0|0|19|0|0|0|R|1|0|0|13|2|0|0|1M|3|0|0|W|4|0|0|3K|8|0|0|0|2|15|5|0|0|9|10|6|0^^$0|@$1|2|3|4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1T|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|1V|8|@]|9|@$J|1W|K|1X|1|1Y]]|A|$]]|$1|L|3|M|5|I|7|1Z|8|@]|9|@$J|20|K|21|1|22]]|A|$]]|$1|N|3|O|5|I|7|23|8|@]|9|@$J|24|K|25|1|26]]|A|$]]|$1|P|3|Q|5|I|7|27|8|@]|9|@$J|28|K|29|1|2A]]|A|$]]|$1|R|3|S|5|I|7|2B|8|@]|9|@$J|2C|K|2D|1|2E]]|A|$]]|$1|T|3|-4|5|6|7|2F|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|2G|8|@$J|2H|K|2I|W|X]]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|2J|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|2K|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|2L|8|@]|9|@$J|2M|K|2N|1|2O]]|A|$]]|$1|13|3|14|5|6|7|2P|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|2Q|8|@]|9|@$J|2R|K|2S|1|2T]]|A|$]]|$1|17|3|-4|5|6|7|2U|8|@]|9|@]|A|$]]]|18|$19|$5|1A|1B|1C|A|$1D|1E]]|1F|$5|1A|1B|1C|A|$1D|1G]]|1H|$5|1A|1B|1C|A|$1D|1I]]|1J|$5|1A|1B|1C|A|$1D|1K]]|1L|$5|1A|1B|1C|A|$1D|1M]]|1N|$5|1A|1B|1C|A|$1D|1O]]|1P|$5|1A|1B|1C|A|$1D|1Q]]]]

<p>UPDATE:</p>
<p>The below answer references the state of things before widespread availability of CSS 3. In modern browsers (including Internet Explorer 9 and later) it is more straightforward to create checkbox replacements with your preferred styling, without using JavaScript.</p>
<p>Here are some useful links:</p>
<ul>
<li><a href="http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/" rel="noreferrer">Creating Custom Form Checkboxes with Just CSS</a></li>
<li><a href="http://csscheckbox.com" rel="noreferrer">Easy CSS Checkbox Generator</a></li>
<li><a href="http://css-tricks.com/the-checkbox-hack/" rel="noreferrer">Stuff You Can Do With The Checkbox Hack</a></li>
<li><a href="http://www.css3.com/implementing-custom-checkboxes-and-radio-buttons-with-css3/" rel="noreferrer">Implementing Custom Checkboxes and Radio Buttons with CSS3</a></li>
<li><a href="https://www.paulund.co.uk/how-to-style-a-checkbox-with-css" rel="noreferrer">How to Style a Checkbox With CSS</a></li>
</ul>
<p>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 <code>:checked</code> selector, you can make your replacement correctly reflect the checked status of the box.</p>
<hr />
<p>OLDER ANSWER</p>
<p>Here's <a href="http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/" rel="noreferrer">a useful article about styling checkboxes</a>.  Basically, that writer found that it varies tremendously from browser to browser, and that many browsers always display the default checkbox no matter how you style it. So there really isn't an easy way.</p>
<p>It's not hard to imagine a workaround where you would use JavaScript to overlay an image on the checkbox and have clicks on that image cause the real checkbox to be checked. Users without JavaScript would see the default checkbox.</p>
<p>Edited to add: here's <a href="https://web.archive.org/web/20160430165815/http://ryanfait.com:80/resources/custom-checkboxes-and-radio-buttons/#" rel="noreferrer">a nice script that does this for you</a>; it hides the real checkbox element, replaces it with a styled span, and redirects the click events.</p>


blocks|key|2057980|text|只使用CSS就可以做到这一点。我们可以(Ab)使用label元素并设置该元素的样式。需要注意的是，这不适用于Internet+Explorer+8和更低版本。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2057981|​|2057982|.myCheckbox+input+{
++position:+relative;
++z-index:+-9999;
}

.myCheckbox+span+{
++width:+20px;
++height:+20px;
++display:+block;
++background:+url("link_to_image");
}

.myCheckbox+input:checked+%2B+span+{
++background:+url("link_to_another_image");
}|code-block|syntax|javascript|2057983|<label+for="test">Label+for+my+styled+"checkbox"</label>
<label+class="myCheckbox">
++<input+type="checkbox"+name="test"+/>
++<span></span>
</label>|2057984|2057985|entityMap^0|P|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>There is a way to do this using just CSS. We can (ab)use the <code>label</code> element and style that element instead. The caveat is that this will not work for Internet&nbsp;Explorer&nbsp;8 and lower versions.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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");
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label for="test"&gt;Label for my styled "checkbox"&lt;/label&gt;
&lt;label class="myCheckbox"&gt;
  &lt;input type="checkbox" name="test" /&gt;
  &lt;span&gt;&lt;/span&gt;
&lt;/label&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1315440|text|我认为最简单的方法是设置label的样式，并使checkbox不可见。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1315441|HTML|1315442|<input+type="checkbox"+id="first"+/>
<label+for="first">&nbsp;</label>|code-block|syntax|javascript|1315443|CSS|1315444|checkbox+{
++display:+none;
}

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

checkbox::checked+%2B+label,
label.checked+{
++/*+Style+for+checkbox+checked+*/
}|1315445|即使checkbox是隐藏的，它仍然是可访问的，并且它的值将在提交表单时发送。对于老版本的浏览器，你可能不得不将label的类更改为使用JavaScript检查，因为我不认为旧版本的I能理解checkbox上的::checked。|1315446|entityMap^0|C|5|N|8|0|0|0|0|0|2|8|1K|5|2N|8|2X|9|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|T|$]]

<p>I think the easiest way to do it is by styling a <code>label</code> and making the <code>checkbox</code> invisible.</p>

<p>HTML</p>

<pre><code>&lt;input type="checkbox" id="first" /&gt;
&lt;label for="first"&gt;&amp;nbsp;&lt;/label&gt;
</code></pre>

<p>CSS</p>

<pre class="lang-css prettyprint-override"><code>checkbox {
  display: none;
}

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

checkbox::checked + label,
label.checked {
  /* Style for checkbox checked */
}
</code></pre>

<p>The <code>checkbox</code>, even though it is hidden, will still be accessible, and its value will be sent when a form is submitted. For old browsers you might have to change the class of the <code>label</code> to checked using JavaScript because I don't think old versions of Internet&nbsp;Explorer  understand <code>::checked</code> on the <code>checkbox</code>.</p>


blocks|key|5003743|text|通过使用:after和:before伪类附带的新功能，可以实现相当酷的自定义复选框效果。这样做的好处是:您不需要向DOM中添加更多内容，只需使用标准的复选框。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5003744|注意:这只适用于兼容的浏览器。我相信这与一些浏览器不允许在输入元素上设置:after和:before有关。不幸的是，这意味着目前只支持WebKit浏览器。Firefox+%2BInternet+Explorer仍然允许复选框起作用，只是没有样式，这一点有望在未来改变(代码不使用供应商前缀)。|5003745|这只是一个WebKit浏览器解决方案(Chrome、Safari、移动浏览器)|BOLD|5003746|5003747|​|5003748|$(function()+{
++$('input').change(function()+{
++++$('div').html(Math.random());
++});
});|code-block|syntax|javascript|5003749|/*+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%25,+#FFF+100%25);
++background-repeat:+no-repeat;
++background-position:+center;
}

.myinput[type="checkbox"]:checked:after+{
++background-image:+url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA%2Bf8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD%2BDam3W%2BkCAAD8APYAAgTVZaZCGwwA5wr0AvcA%2BDh%2B7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/%2B9N%2BAAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'),+linear-gradient(135deg,+#B1B6BE+0%25,+#FFF+100%25);
}

.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%2Bf8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD%2BDam3W%2BkCAAD8APYAAgTVZaZCGwwA5wr0AvcA%2BDh%2B7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/%2B9N%2BAAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'),+linear-gradient(135deg,+#8BB0C2+0%25,+#FFF+100%25);
}

.myinput[type="checkbox"]:not(:disabled):hover:after+{
++background-image:+linear-gradient(135deg,+#8BB0C2+0%25,+#FFF+100%25);
++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%2BOzN/oMwshjRBoA0Gr8%2BDcbIhhBlAEyz%2BqZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'),+linear-gradient(135deg,+#B1B6BE+0%25,+#FFF+100%25);
}

.myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after+{
++background-image:+url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD%2BOzN/oMwshjRBoA0Gr8%2BDcbIhhBlAEyz%2BqZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'),+linear-gradient(135deg,+#8BB0C2+0%25,+#FFF+100%25);
}|5003750|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table+style="width:100%25">
++<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>|5003751|5003752|5003753|5003754|$(function()+{
++var+f+=+function()+{
++++$(this).next().text($(this).is(':checked')+?+':checked'+:+':not(:checked)');
++};
++$('input').change(f).trigger('change');
});|5003755|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%25;
++display:+block;
++line-height:+32px;
++width:+45%25;
++height:+90%25;
++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%25;
++content:+"OFF";
}

.flipswitch:checked:after+{
++left:+53%25;
++content:+"ON";
}|5003756|<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>|5003757|5003758|entityMap^0|4|6|B|7|0|10|6|17|7|0|0|13|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1D|8|@$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1I|8|@$9|1J|A|1K|B|J]]|D|@]|E|$]]|$1|K|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1M|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1N|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|P|7|1O|8|@]|D|@]|E|$Q|R]]|$1|U|3|V|5|P|7|1P|8|@]|D|@]|E|$Q|R]]|$1|W|3|M|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1R|8|@]|D|@]|E|$]]|$1|Y|3|M|5|6|7|1S|8|@]|D|@]|E|$]]|$1|Z|3|10|5|P|7|1T|8|@]|D|@]|E|$Q|R]]|$1|11|3|12|5|P|7|1U|8|@]|D|@]|E|$Q|R]]|$1|13|3|14|5|P|7|1V|8|@]|D|@]|E|$Q|R]]|$1|15|3|M|5|6|7|1W|8|@]|D|@]|E|$]]|$1|16|3|-4|5|6|7|1X|8|@]|D|@]|E|$]]]|17|$]]

<p>You can achieve quite a cool custom checkbox effect by using the new abilities that come with the <code>:after</code> and <code>:before</code> pseudo classes. The advantage to this, is: You don't need to add anything more to the DOM, just the standard checkbox.</p>

<p>Note this will only work for compatible browsers. I believe this is related to the fact that some browsers do not allow you to set <code>:after</code> and <code>:before</code> on input elements. Which unfortunately means for the moment only WebKit browsers are supported. Firefox + Internet&nbsp;Explorer will still allow the checkboxes to function, just unstyled, and this will hopefully change in the future (the code does not use vendor prefixes).</p>

<p><strong>This is a WebKit browser solution only (Chrome, Safari, Mobile browsers)</strong></p>

<p><strong><a href="http://jsfiddle.net/YMuPw/15/" rel="noreferrer">See Example Fiddle</a></strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  $('input').change(function() {
    $('div').html(Math.random());
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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%);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;table style="width:100%"&gt;
  &lt;tr&gt;
    &lt;td&gt;Normal:&lt;/td&gt;
    &lt;td&gt;&lt;input type="checkbox" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="checkbox" checked="checked" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="checkbox" disabled="disabled" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="checkbox" disabled="disabled" checked="checked" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Small:&lt;/td&gt;
    &lt;td&gt;&lt;input type="checkbox" class="myinput" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="checkbox" checked="checked" class="myinput" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="checkbox" disabled="disabled" class="myinput" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="checkbox" disabled="disabled" checked="checked" class="myinput" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Large:&lt;/td&gt;
    &lt;td&gt;&lt;input type="checkbox" class="myinput large" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="checkbox" checked="checked" class="myinput large" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="checkbox" disabled="disabled" class="myinput large" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Custom icon:&lt;/td&gt;
    &lt;td&gt;&lt;input type="checkbox" class="myinput large custom" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="checkbox" checked="checked" class="myinput large custom" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="checkbox" disabled="disabled" class="myinput large custom" /&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://jsfiddle.net/dv904vn1/2/" rel="noreferrer"><strong>Bonus Webkit style flipswitch fiddle</strong></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  var f = function() {
    $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');
  };
  $('input').change(f).trigger('change');
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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";
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;

&lt;h2&gt;Webkit friendly mobile-style checkbox/flipswitch&lt;/h2&gt;
&lt;input type="checkbox" class="flipswitch" /&gt; &amp;nbsp;
&lt;span&gt;&lt;/span&gt;
&lt;br&gt;
&lt;input type="checkbox" checked="checked" class="flipswitch" /&gt; &amp;nbsp;
&lt;span&gt;&lt;/span&gt;</code></pre>
</div>
</div>
</p>


blocks|key|5003793|text|您可以使用label元素通过一个小技巧设置复选框的样式，下面是一个示例：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5003794|​|5003795|.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+%2B+label+{
++left:+43px;
}|code-block|syntax|javascript|5003796|<div+class="checkbox">
++<input+id="checkbox1"+type="checkbox"+value="1"+/>
++<label+for="checkbox1"></label>
</div>|5003797|5003798|以及上述代码的。请注意，一些CSS在旧版本的浏览器中不起作用，但我相信有一些奇特的JavaScript示例！|5003799|entityMap^0|5|5|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

<p>You can style checkboxes with a little trickery using the <code>label</code> element an example is below:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.checkbox &gt; 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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="checkbox"&gt;
  &lt;input id="checkbox1" type="checkbox" value="1" /&gt;
  &lt;label for="checkbox1"&gt;&lt;/label&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>And a <strong><a href="https://jsfiddle.net/w6y7u3na/" rel="noreferrer">FIDDLE</a></strong> for the above code. Note that some CSS doesn't work in older versions of browsers, but I'm sure there are some fancy JavaScript examples out there!</p>


blocks|key|3592495|text|在文本前添加图标的快速修复：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3592496|<+asp:CheckBox...+Text="<+img+src='/link/to/img.png'+/>My+Text"+/>|code-block|syntax|javascript|3592497|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Quick fix to add icon in front of text:</p>

<pre><code>&lt; asp:CheckBox... Text="&lt; img src='/link/to/img.png' /&gt;My Text" /&gt;
</code></pre>


blocks|key|5003874|text|呀！所有这些变通方法让我得出这样的结论:如果你想设置样式，HTML复选框有点糟糕。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5003875|作为一个警告，这不是一个CSS实现。我只是想分享一下我想出的解决办法，以防其他人会觉得有用。|5003876|5003877|我使用了HTML5+canvas元素。|offset|length|style|CODE|5003878|这样做的好处是，您不必使用外部图像，并且可能会节省一些带宽。|5003879|缺点是，如果浏览器由于某种原因不能正确地呈现它，那么就没有后备。不过，这在2017年是否仍是一个问题仍有争议。|5003880|更新|5003881|我发现旧的代码相当难看，所以我决定重写它。|5003882|Object.prototype.create+=+function(args){
++++var+retobj+=+Object.create(this);

++++retobj.constructor(args+%7C%7C+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+%7C%7C+15;
++++++++this.height+=+args.height+%7C%7C+15;
++++++++this.document+=+args.document+%7C%7C+window.document;
++++++++this.parent+=+args.target+%7C%7C+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;
++++}
});|code-block|syntax|javascript|5003883|这是一个working+demo。|5003884|新版本使用原型和差异继承来创建用于创建复选框的高效系统。要创建复选框，请执行以下操作：|5003885|var+my_checkbox+=+Checkbox.create();|5003886|这将立即将复选框添加到DOM并挂钩事件。要查询复选框是否已选中，请执行以下操作：|5003887|my_checkbox.is_checked();+//+True+if+checked,+else+false|5003888|同样需要注意的是，我去掉了循环。|5003889|更新2|5003890|我在上一次更新中忽略了一件事，那就是使用画布比仅仅制作一个看起来像你想要的样子的复选框有更多的优势。如果愿意，您还可以创建多状态复选框。|5003891|Object.prototype.create+=+function(args){
++++var+retobj+=+Object.create(this);

++++retobj.constructor(args+%7C%7C+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+%7C%7C+15;
++++++++this.height+=+args.height+%7C%7C+15;
++++++++this.document+=+args.document+%7C%7C+window.document;
++++++++this.parent+=+args.target+%7C%7C+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+%2B+1)+%25+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;
++++}
});|5003892|我稍微修改了最后一段代码中使用的Checkbox，使其更通用，从而可以使用具有3个状态的复选框来“扩展”它。这是a+demo。正如您所看到的，它已经具有比内置复选框更多的功能。|5003893|在JavaScript和CSS之间进行选择时需要考虑的一些问题。|5003894|旧的、设计得很差的代码|5003895|Working+Demo|5003896|首先，设置一个画布|5003897|var+canvas+=+document.createElement('canvas'),
++++ctx+=+canvas.getContext('2d'),
++++checked+=+0;+//+The+state+of+the+checkbox
canvas.width+=+canvas.height+=+15;+//+Set+the+width+and+height+of+the+canvas
document.body.appendChild(canvas);
document.body.appendChild(document.createTextNode('+Togglable+Option'));|5003898|接下来，设计一种让画布自我更新的方法。|5003899|(function+loop(){
++//+Draws+a+border
++ctx.fillStyle+=+'#ccc';
++ctx.fillRect(0,0,15,15);
++ctx.fillStyle+=+'#fff';
++ctx.fillRect(1,+1,+13,+13);
++//+Fills+in+canvas+if+checked
++if(checked){
++++ctx.fillStyle+=+'#000';
++++ctx.fillRect(2,+2,+11,+11);
++}
++setTimeout(loop,+1000/10);+//+Refresh+10+times+per+second
})();|5003900|最后一部分是让它具有交互性。幸运的是，它非常简单：|5003901|canvas.onclick+=+function(){
++checked+=+!checked;
}|5003902|这就是你在IE中可能会遇到问题的地方，因为他们在JavaScript中奇怪的事件处理模型。|5003903|5003904|我希望这对某些人有帮助；它肯定满足了我的需求。|5003905|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/5und7njs/1|1|https://jsfiddle.net/5und7njs/2/|2|http://jsfiddle.net/txsFA/^0|0|0|0|A|6|0|0|0|0|0|0|4|C|0|0|0|0|0|0|0|0|0|0|G|8|1K|6|1|0|0|0|0|C|2|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|2G|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|2H|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|2I|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|2J|8|@$G|2K|H|2L|I|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|2M|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|2N|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|2O|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|2P|8|@]|9|@]|A|$]]|$1|S|3|T|5|U|7|2Q|8|@]|9|@]|A|$V|W]]|$1|X|3|Y|5|6|7|2R|8|@]|9|@$G|2S|H|2T|1|2U]]|A|$]]|$1|Z|3|10|5|6|7|2V|8|@]|9|@]|A|$]]|$1|11|3|12|5|U|7|2W|8|@]|9|@]|A|$V|W]]|$1|13|3|14|5|6|7|2X|8|@]|9|@]|A|$]]|$1|15|3|16|5|U|7|2Y|8|@]|9|@]|A|$V|W]]|$1|17|3|18|5|6|7|2Z|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|30|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|6|7|31|8|@]|9|@]|A|$]]|$1|1D|3|1E|5|U|7|32|8|@]|9|@]|A|$V|W]]|$1|1F|3|1G|5|6|7|33|8|@$G|34|H|35|I|J]]|9|@$G|36|H|37|1|38]]|A|$]]|$1|1H|3|1I|5|6|7|39|8|@]|9|@]|A|$]]|$1|1J|3|1K|5|6|7|3A|8|@]|9|@]|A|$]]|$1|1L|3|1M|5|6|7|3B|8|@]|9|@$G|3C|H|3D|1|3E]]|A|$]]|$1|1N|3|1O|5|6|7|3F|8|@]|9|@]|A|$]]|$1|1P|3|1Q|5|U|7|3G|8|@]|9|@]|A|$V|W]]|$1|1R|3|1S|5|6|7|3H|8|@]|9|@]|A|$]]|$1|1T|3|1U|5|U|7|3I|8|@]|9|@]|A|$V|W]]|$1|1V|3|1W|5|6|7|3J|8|@]|9|@]|A|$]]|$1|1X|3|1Y|5|U|7|3K|8|@]|9|@]|A|$V|W]]|$1|1Z|3|20|5|6|7|3L|8|@]|9|@]|A|$]]|$1|21|3|-4|5|6|7|3M|8|@]|9|@]|A|$]]|$1|22|3|23|5|6|7|3N|8|@]|9|@]|A|$]]|$1|24|3|-4|5|6|7|3O|8|@]|9|@]|A|$]]]|25|$26|$5|27|28|29|A|$2A|2B]]|2C|$5|27|28|29|A|$2A|2D]]|2E|$5|27|28|29|A|$2A|2F]]]]

<p>Yikes! All these workarounds have led me to the conclusion that the HTML checkbox kind of sucks if you want to style it.</p>

<p>As a forewarning, this isn't a CSS implementation. I just thought I'd share the workaround I came up with in case anyone else might find it useful.</p>

<hr/>

<p>I used the HTML5 <code>canvas</code> element.</p>

<p>The upside to this is that you don't have to use external images and can probably save some bandwidth.</p>

<p>The downside is that if a browser for some reason can't render it correctly, then there's no fallback. Though whether this remains an issue in 2017 is debatable.</p>

<h2>Update</h2>

<p>I found the old code quite ugly, so I decided to give it a rewrite.</p>

<pre><code>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;
    }
});
</code></pre>

<p>Here's a <a href="https://jsfiddle.net/5und7njs/1" rel="nofollow noreferrer">working demo</a>.</p>

<p>The new version uses prototypes and differential inheritance to create an efficient system for creating checkboxes. To create a checkbox:</p>

<pre><code>var my_checkbox = Checkbox.create();
</code></pre>

<p>This will immediately add the checkbox to the DOM and hook up the events. To query whether a checkbox is checked:</p>

<pre><code>my_checkbox.is_checked(); // True if checked, else false
</code></pre>

<p>Also important to note is that I got rid of the loop.</p>

<h2>Update 2</h2>

<p>Something I neglected to mention in the last update is that using the canvas has more advantages than just making a checkbox that looks however you want it to look. You could also create <em>multi-state</em> checkboxes, if you wanted to.</p>

<pre><code>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;
    }
});
</code></pre>

<p>I modified slightly the <code>Checkbox</code> used in the last snippet so that it is more generic, making it possible to "extend" it with a checkbox that has 3 states. Here's <a href="https://jsfiddle.net/5und7njs/2/" rel="nofollow noreferrer">a demo</a>. As you can see, it already has more functionality than the built-in checkbox.</p>

<p>Something to consider when you're choosing between JavaScript and CSS.</p>

<h2>Old, poorly-designed code</h2>

<p><a href="http://jsfiddle.net/txsFA/" rel="nofollow noreferrer">Working Demo</a></p>

<p>First, set up a canvas</p>

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

<p>Next, devise a way to have the canvas update itself.</p>

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

<p>The last part is to make it interactive. Luckily, it's pretty simple:</p>

<pre><code>canvas.onclick = function(){
  checked = !checked;
}
</code></pre>

<p>This is where you might have problems in IE, due to their weird event handling model in JavaScript.</p>

<hr/>

<p>I hope this helps someone; it definitely suited my needs.</p>


blocks|key|3592556|text|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+%2B+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+%2B+label.css-label+{
++++background-position:+0+-15px;
}

.css-label{
++++background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3592557|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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);
}
</code></pre>


blocks|key|2062199|text|我更喜欢使用图标字体(如FontAwesome)，因为用CSS修改它们的颜色很容易，而且它们在高像素密度设备上缩放得很好。因此，这里是另一个纯CSS变体，使用与上面类似的技术。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2062200|(下面是一张静态图像，以便您可以可视化结果；请参阅the+JSFiddle以获取交互式版本。)|offset|length|2062201|​|2062202|📷|atomic|2062203|2062204|与其他解决方案一样，它使用label元素。相邻的span包含我们的复选框字符。|style|CODE|2062205|2062206|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+%2B+span.bigcheck-target:after+{
++content:+"\f096";+/*+In+fontawesome,+is+an+open+square+(fa-square-o)+*/
}

input[type='checkbox'].bigcheck:checked+%2B+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;
}|code-block|syntax|javascript|2062207|<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>|2062208|2062209|这是它的JSFiddle。|2062210|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/cunneen/D2mhh/2/|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/185b68462c953dd77dc2a94c1e034430.png|imageAlt|2^0|0|P|C|0|0|0|0|1|1|0|0|D|5|O|4|0|0|0|0|0|4|8|2|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1G|8|@]|9|@$D|1H|E|1I|1|1J]]|A|$]]|$1|F|3|G|5|6|7|1K|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1L|8|@]|9|@$D|1M|E|1N|1|1O]]|A|$]]|$1|K|3|G|5|6|7|1P|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1Q|8|@$D|1R|E|1S|N|O]|$D|1T|E|1U|N|O]]|9|@]|A|$]]|$1|P|3|G|5|6|7|1V|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1W|8|@]|9|@]|A|$T|U]]|$1|V|3|W|5|S|7|1X|8|@]|9|@]|A|$T|U]]|$1|X|3|G|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1Z|8|@]|9|@$D|20|E|21|1|22]]|A|$]]|$1|10|3|-4|5|6|7|23|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]|18|$5|19|14|1A|A|$1B|1C|1D|-4]]|1E|$5|13|14|15|A|$16|17]]]]

<p>I prefer to use icon fonts (such as FontAwesome) since it's easy to modify their colours with CSS, and they scale really well on high pixel-density devices. So here's another pure CSS variant, using similar techniques to those above.</p>

<p>(Below is a static image so you can visualize the result; see <a href="http://jsfiddle.net/cunneen/D2mhh/2/" rel="nofollow noreferrer">the JSFiddle</a> for an interactive version.)</p>

<p><img src="https://i.stack.imgur.com/j6zdx.png" alt="Checkbox example"></p>

<p>As with other solutions, it uses the <code>label</code> element. An adjacent <code>span</code> holds our checkbox character.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /&gt;

&lt;span class="bigcheck"&gt;
  &lt;label class="bigcheck"&gt;
    Cheese
    &lt;input type="checkbox" class="bigcheck" name="cheese" value="yes" /&gt;
    &lt;span class="bigcheck-target"&gt;&lt;/span&gt;
  &lt;/label&gt;
&lt;/span&gt;</code></pre>
</div>
</div>
</p>

<p>Here's the <a href="http://jsfiddle.net/cunneen/D2mhh/2/" rel="nofollow noreferrer">JSFiddle</a> for it.</p>


blocks|key|5004053|text|这是一个没有任何jQuery或JavaScript代码的简单CSS解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5004054|我使用的是FontAwseome图标，但您可以使用任何图像|5004055|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;
}|code-block|syntax|javascript|5004056|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Here is a simple CSS solution without any jQuery or JavaScript code.</p>

<p>I am using FontAwseome icons but you can use any image</p>

<pre class="lang-css prettyprint-override"><code>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;
}
</code></pre>


blocks|key|1315629|text|这是一个只有CSS+/+HTML的版本，根本不需要jQuery或JavaScript，简单干净的HTML和非常简单简短的CSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1315630|这是JSFiddle|1315631|http://jsfiddle.net/v71kn3pr/|offset|length|1315632|下面是HTML：|1315633|<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>|code-block|syntax|javascript|1315634|这是CSS|1315635|#myContainer+{
++++outline:+black+dashed+1px;
++++width:+200px;
}
#myContainer+input[type="checkbox"][name="myCheckbox"]+{
++++display:+none;
}
#myContainer+input[type="checkbox"][name="myCheckbox"]:not(:checked)+%2B+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+%2B+label.box+{
++++display:+inline-block;
++++width:+25px;
++++height:+25px;
++++border:+black+solid+1px;
++++background:+#F00;
++++margin:+5px+5px;
}
#myContainer+input[type="checkbox"][name="myCheckbox"]+%2B+label+%2B+label.text+{
++++font:+normal+12px+arial;
++++display:+inline-block;
++++line-height:+27px;
++++vertical-align:+top;
++++margin:+5px+0px;
}|1315636|这可以调整为能够拥有单独的单选或复选框、复选框组和单选按钮组。|1315637|这个html/css，将允许你捕获点击标签，所以复选框将被选中和取消选中，即使你只点击标签。|1315638|这种类型的复选框/单选按钮在任何表单上都可以完美地工作，完全没有问题。已经使用PHP、ASP.NET+(.aspx)、JavaServer+Faces和ColdFusion进行了测试。|1315639|entityMap|0|LINK|mutability|MUTABLE|url|1|https://en.wikipedia.org/wiki/JavaServer_Faces|2|http://en.wikipedia.org/wiki/Adobe_ColdFusion^0|0|0|0|T|0|0|0|0|0|0|0|0|1N|G|1|24|A|2|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1A|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1B|8|@]|9|@$F|1C|G|1D|1|1E]]|A|$]]|$1|H|3|I|5|6|7|1F|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1G|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1H|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1I|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1J|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1K|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1L|8|@]|9|@$F|1M|G|1N|1|1O]|$F|1P|G|1Q|1|1R]]|A|$]]|$1|Y|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|E]]|15|$5|11|12|13|A|$14|16]]|17|$5|11|12|13|A|$14|18]]]]

<p>Here is a CSS/HTML-only version, no jQuery or JavaScript needed at all, Simple and clean HTML and really simple and short CSS.</p>

<p>Here is the JSFiddle</p>

<p><a href="http://jsfiddle.net/v71kn3pr/" rel="nofollow noreferrer">http://jsfiddle.net/v71kn3pr/</a></p>

<p>Here is the HTML:</p>

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

<p>Here is the CSS</p>

<pre><code>#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;
}
</code></pre>

<p>This can be adapted to be able to have individual radio or checkboxes, grooups of checkboxes and groups of radio buttons as well.</p>

<p>This html/css, will allow you to also capture click on the label, so the checkbox will be checked and unchecked even if you click just on the label.</p>

<p>This type of checkbox/radio button works perfectly with any form, no problem at all. Have been tested using PHP, ASP.NET (.aspx), <a href="https://en.wikipedia.org/wiki/JavaServer_Faces" rel="nofollow noreferrer">JavaServer Faces</a>, and <a href="http://en.wikipedia.org/wiki/Adobe_ColdFusion" rel="nofollow noreferrer">ColdFusion</a> too.</p>


blocks|key|3592750|text|开始之前(截至2015年1月)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3592751|最初的问题和答案现在已经有5年的历史了。因此，这是一个小小的更新。|3592752|首先，当涉及到样式复选框时，有许多方法。基本原则是：|3592753|3592754|您需要隐藏默认的checkbox控件，该控件由浏览器设置样式，不能使用CSS以任何有意义的方式覆盖。|ordered-list-item|3592755|3592756|3592757|在控件隐藏的情况下，您仍需要能够检测和切换其选中状态。|3592758|3592759|3592760|需要通过设计新元素的样式来反映复选框的选中状态。|3592761|3592762|解决方案(原则上)|3592763|上述工作可以通过多种方式实现-您经常会听说使用CSS3伪元素是正确的方式。实际上，没有真正的正确或错误的方法，它取决于最适合您将在其中使用它的上下文的方法。这就是说，我有一个首选的。|3592764|3592765|将复选框包装在label元素中。这意味着即使它处于隐藏状态，您仍然可以通过单击标签中的任意位置来切换其选中状态。|offset|length|style|CODE|3592766|3592767|3592768|隐藏您的复选框。|3592769|3592770|3592771|在复选框后添加一个新元素，您将相应地设置其样式。它必须出现在复选框之后，以便可以使用CSS选择它，并根据:checked状态设置样式。CSS无法选择'backwards'.|3592772|3592773|解决方案(在代码中)|3592774|​|3592775|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+%2B+span+{/*+<--+Style+its+checked+state+*/
++background:+black;
}|code-block|syntax|javascript|3592776|<label>
++<input+type='checkbox'>
++<span></span>
++Checkbox+label+text
</label>|3592777|3592778|细化(使用图标)|3592779|“但是，嘿！”我听到了你的叫喊。如果我想在框中显示一个漂亮的小勾号或十字，该怎么办？我不想使用背景图片！|3592780|这就是CSS3的伪元素可以发挥作用的地方。它们支持content属性，该属性允许您注入表示任一状态的Unicode+icons。或者，你也可以使用第三方字体图标源，比如font+awesome+(不过要确保你也设置了相关的font-family，比如FontAwesome)|3592781|3592782|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+%2B+span:before+{
++content:+'\2714';
++position:+absolute;
++top:+-5px;
++left:+0;
}|3592783|<label>
++<input+type='checkbox'>
++<span></span>
++Checkbox+label+text
</label>|3592784|3592785|entityMap|0|LINK|mutability|MUTABLE|url|http://unicode-table.com/en/^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|7|5|0|0|0|0|0|0|1G|8|0|0|0|0|0|0|0|0|0|P|7|33|B|3H|B|1E|D|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|28|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|29|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|2A|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|2B|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|2C|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|2D|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|2E|8|@]|9|@]|A|$]]|$1|L|3|M|5|I|7|2F|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|2G|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|2H|8|@]|9|@]|A|$]]|$1|P|3|Q|5|I|7|2I|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|2J|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|2K|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|2L|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|2M|8|@]|9|@]|A|$]]|$1|X|3|Y|5|I|7|2N|8|@$Z|2O|10|2P|11|12]]|9|@]|A|$]]|$1|13|3|-4|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|2R|8|@]|9|@]|A|$]]|$1|15|3|16|5|I|7|2S|8|@]|9|@]|A|$]]|$1|17|3|-4|5|6|7|2T|8|@]|9|@]|A|$]]|$1|18|3|-4|5|6|7|2U|8|@]|9|@]|A|$]]|$1|19|3|1A|5|I|7|2V|8|@$Z|2W|10|2X|11|12]]|9|@]|A|$]]|$1|1B|3|-4|5|6|7|2Y|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|2Z|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|30|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|1I|7|31|8|@]|9|@]|A|$1J|1K]]|$1|1L|3|1M|5|1I|7|32|8|@]|9|@]|A|$1J|1K]]|$1|1N|3|1F|5|6|7|33|8|@]|9|@]|A|$]]|$1|1O|3|1P|5|6|7|34|8|@]|9|@]|A|$]]|$1|1Q|3|1R|5|6|7|35|8|@]|9|@]|A|$]]|$1|1S|3|1T|5|6|7|36|8|@$Z|37|10|38|11|12]|$Z|39|10|3A|11|12]|$Z|3B|10|3C|11|12]]|9|@$Z|3D|10|3E|1|3F]]|A|$]]|$1|1U|3|1F|5|6|7|3G|8|@]|9|@]|A|$]]|$1|1V|3|1W|5|1I|7|3H|8|@]|9|@]|A|$1J|1K]]|$1|1X|3|1Y|5|1I|7|3I|8|@]|9|@]|A|$1J|1K]]|$1|1Z|3|1F|5|6|7|3J|8|@]|9|@]|A|$]]|$1|20|3|-4|5|6|7|3K|8|@]|9|@]|A|$]]]|21|$22|$5|23|24|25|A|$26|27]]]]

<h2>Before you begin (as of Jan 2015)</h2>
<p>The original question and answer are now ~5 years old. As such, this is a little bit of an update.</p>
<p>Firstly, there are a number of approaches when it comes to styling checkboxes. The basic tenet is:</p>
<ol>
<li><p>You will need to hide the default checkbox control which is styled by your browser, and cannot be overridden in any meaningful way using CSS.</p>
</li>
<li><p>With the control hidden, you will still need to be able to detect and toggle its checked state.</p>
</li>
<li><p>The checked state of the checkbox will need to be reflected by styling a new element.</p>
</li>
</ol>
<h2>The solution (in principle)</h2>
<p>The above can be accomplished by a number of means — and you will often hear that using CSS3 pseudo-elements is the right way. Actually, there is no real right or wrong way, it depends on the approach most suitable for the context you will be using it in. That said, I have a preferred one.</p>
<ol>
<li><p>Wrap your checkbox in a <code>label</code> element. This will mean that even when it is hidden, you can still toggle its checked state by clicking anywhere within the label.</p>
</li>
<li><p>Hide your checkbox.</p>
</li>
<li><p>Add a new element <em>after</em> the checkbox which you will style accordingly. It must appear after the checkbox so it can be selected using CSS and styled dependent on the <code>:checked</code> state. CSS cannot select 'backwards'.</p>
</li>
</ol>
<h2>The solution (in code)</h2>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>label input {
  visibility: hidden;/* &lt;-- 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 {/* &lt;-- Style the artificial checkbox */
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
}
[type=checkbox]:checked + span {/* &lt;-- Style its checked state */
  background: black;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label&gt;
  &lt;input type='checkbox'&gt;
  &lt;span&gt;&lt;/span&gt;
  Checkbox label text
&lt;/label&gt;</code></pre>
</div>
</div>
</p>
<h2>Refinement (using icons)</h2>
<p>&quot;But hey!&quot; I hear you shout. What about if I want to show a nice little tick or cross in the box? And I don't want to use background images!</p>
<p>Well, this is where CSS3's pseudo-elements can come into play. These support the <code>content</code> property which allows you to inject <a href="http://unicode-table.com/en/" rel="nofollow noreferrer">Unicode icons</a> representing either state. Alternatively, you could use a third party font icon source such as font awesome (though make sure you also set the relevant <code>font-family</code>, e.g. to <code>FontAwesome</code>)</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label&gt;
  &lt;input type='checkbox'&gt;
  &lt;span&gt;&lt;/span&gt;
  Checkbox label text
&lt;/label&gt;</code></pre>
</div>
</div>
</p>


blocks|key|5004155|text|不，你仍然不能设计复选框本身的样式，但我(最终)想出了如何在保持点击复选框的功能的同时设计出一个错觉的样式。这意味着即使光标不是完全静止的，你也可以切换它，而不用冒着选择文本或触发拖放的风险！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5004156|此解决方案可能也适用于单选按钮。|5004157|以下代码适用于Internet+Explorer+9、Firefox+30.0和Chrome+40.0.2214.91，只是一个基本示例。您仍然可以将其与背景图像和伪元素结合使用。|5004158|http://jsfiddle.net/o0xo13yL/1/|offset|length|5004159|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%25;
++++height:+100%25;
++++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"]+%2B+span+{
++++display:+inline-block;
++++width:+1rem;
++++height:+1rem;
++++border:+1px+solid+#000;
++++margin-right:+.5rem;
}

label+>+input[type="checkbox"]:checked+%2B+span+{
++++background-color:+#666;
}

<label>
++++<input+type="checkbox"+/>
++++<span>&nbsp;</span>Label+text
</label>|code-block|syntax|javascript|5004160|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|V|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@$H|Z|I|10|1|11]]|A|$]]|$1|J|3|K|5|L|7|12|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|G]]]]

<p>No, you still can't style the checkbox itself, but I (finally) figured out how to style an illusion while <strong>keeping the functionality</strong> of clicking a checkbox. It means that you can toggle it even if the cursor isn't perfectly still without risking selecting text or triggering drag-and-drop!</p>

<p>This solution probably also fits radio buttons.</p>

<p>The following works in Internet&nbsp;Explorer&nbsp;9, Firefox 30.0 and Chrome 40.0.2214.91 and is just a basic example. You can still use it in combination with background images and pseudo-elements.</p>

<p><a href="http://jsfiddle.net/o0xo13yL/1/" rel="nofollow noreferrer">http://jsfiddle.net/o0xo13yL/1/</a></p>

<pre><code>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 &gt; 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 &gt; input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
}

label &gt; input[type="checkbox"]:checked + span {
    background-color: #666;
}

&lt;label&gt;
    &lt;input type="checkbox" /&gt;
    &lt;span&gt;&amp;nbsp;&lt;/span&gt;Label text
&lt;/label&gt;
</code></pre>


blocks|key|1315705|text|这是最简单的方法，您可以选择要赋予此样式的复选框。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1315706|CSS：|1315707|.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+%2B+span:before+{
++background:+url("checked.png");
}|code-block|syntax|javascript|1315708|HTML：|1315709|<label+class="check-box">
++<input+type="checkbox">
++<span>Check+box+Text</span>
</label>|1315710|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This is simplest way and you can choose which checkboxes to give this style.</p>

<p>CSS:</p>

<pre class="lang-css prettyprint-override"><code>.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");
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;label class="check-box"&gt;
  &lt;input type="checkbox"&gt;
  &lt;span&gt;Check box Text&lt;/span&gt;
&lt;/label&gt;
</code></pre>


blocks|key|2062283|text|最近，我找到了一个非常有趣的问题解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2062284|您可以使用appearance:+none;关闭checkbox的默认样式，然后像所描述的here+(Example+4)那样编写自己的样式。|offset|length|style|CODE|2062285|​|2062286|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;
}|code-block|syntax|javascript|2062287|<input+type="checkbox">|2062288|2062289|不幸的是，浏览器对appearance选项的支持非常糟糕。根据我的个人测试，我只能让Opera和Chrome正常工作。但是，当有更好的支持或者你只想使用Chrome/Opera时，这将是保持简单的方法。|2062290|Example+JSFiddle|2062291|"Can+I+use?"+link|2062292|entityMap|0|LINK|mutability|MUTABLE|url|https://drafts.csswg.org/css-ui-4/#appearance-switching|1|https://jsfiddle.net/fxv6dunu/|2|http://caniuse.com/#search=appearance^0|0|5|H|19|G|0|0|0|0|0|0|9|A|0|0|G|1|0|0|H|2|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1A|8|@$D|1B|E|1C|F|G]]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|H|3|I|5|6|7|1G|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1H|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|1I|8|@]|9|@]|A|$M|N]]|$1|Q|3|I|5|6|7|1J|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1K|8|@$D|1L|E|1M|F|G]]|9|@]|A|$]]|$1|T|3|U|5|6|7|1N|8|@]|9|@$D|1O|E|1P|1|1Q]]|A|$]]|$1|V|3|W|5|6|7|1R|8|@]|9|@$D|1S|E|1T|1|1U]]|A|$]]|$1|X|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14]]|15|$5|10|11|12|A|$13|16]]|17|$5|10|11|12|A|$13|18]]]]

<p>Recently I found a quite interesting solution to the problem.</p>
<p>You could use <code>appearance: none;</code> to turn off the checkbox's default style and then write your own over it like described <a href="https://drafts.csswg.org/css-ui-4/#appearance-switching" rel="noreferrer">here (Example 4)</a>.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox"&gt;</code></pre>
</div>
</div>
</p>
<p>Unfortunately browser support is quite bad for the <code>appearance</code> 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.</p>
<p><a href="https://jsfiddle.net/fxv6dunu/" rel="noreferrer">Example JSFiddle</a></p>
<p><a href="http://caniuse.com/#search=appearance" rel="noreferrer">&quot;Can I use?&quot; link</a></p>


blocks|key|3592922|text|我总是使用伪元素:before和:after来更改复选框和单选按钮的外观。它的作用就像一种护身符。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3592923|有关详细信息，请参阅此|3592924|3592925|步骤|BOLD|3592926|3592927|使用css规则(如visibility:hidden、opacity:0或position:absolute;left:-9999px等)隐藏默认复选框。|ordered-list-item|3592928|使用:before元素创建一个假的复选框，并传递一个空的或不间断的空格。如果复选框处于:checked状态，请传递unicode+D18:checked>样式，以使复选框成为css样式。|3592929|3592930|这就是我是如何做到的。|3592931|​|3592932|.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"]+%2B+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+%2B+label:before+{
++background:+#fff;
++color:+#333;
++content:+"\2713";
++text-align:+center;
}
input[type="checkbox"]:checked+%2B+label:after+{
++font-weight:+bold;
}

input[type="checkbox"]:focus+%2B+label::before+{
++++outline:+rgb(59,+153,+252)+auto+5px;
}|code-block|syntax|javascript|3592933|<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>|3592934|3592935|使用:before+:after+和更加时尚|3592936|3592937|body{
++font-family:+sans-serif;++
}

.container+{
++++margin-top:+50px;
++++margin-left:+20px;
++++margin-right:+20px;
}
.checkbox+{
++++width:+100%25;
++++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%25;
++++-webkit-transform:+translateY(-50%25);
++++transform:+translateY(-50%25);
}
.checkbox+input[type="checkbox"]:focus+%2B+label::before+{
++++outline:+0;
}|3592938|<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>|3592939|3592940|entityMap^0|8|7|G|6|0|0|0|0|2|0|0|9|H|R|9|11|U|0|2|7|17|8|0|0|0|0|0|0|0|2|7|A|6|H|1|2|7|A|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1J|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]|$1|I|3|J|5|6|7|1L|8|@$9|1M|A|1N|B|K]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|1P|8|@$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|O|7|1W|8|@$9|1X|A|1Y|B|C]|$9|1Z|A|20|B|C]]|D|@]|E|$]]|$1|R|3|-4|5|6|7|21|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|22|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|23|8|@]|D|@]|E|$]]|$1|W|3|X|5|Y|7|24|8|@]|D|@]|E|$Z|10]]|$1|11|3|12|5|Y|7|25|8|@]|D|@]|E|$Z|10]]|$1|13|3|V|5|6|7|26|8|@]|D|@]|E|$]]|$1|14|3|15|5|6|7|27|8|@$9|28|A|29|B|K]|$9|2A|A|2B|B|K]|$9|2C|A|2D|B|K]|$9|2E|A|2F|B|C]|$9|2G|A|2H|B|C]]|D|@]|E|$]]|$1|16|3|V|5|6|7|2I|8|@]|D|@]|E|$]]|$1|17|3|18|5|Y|7|2J|8|@]|D|@]|E|$Z|10]]|$1|19|3|1A|5|Y|7|2K|8|@]|D|@]|E|$Z|10]]|$1|1B|3|V|5|6|7|2L|8|@]|D|@]|E|$]]|$1|1C|3|-4|5|6|7|2M|8|@]|D|@]|E|$]]]|1D|$]]

<p>I always use pseudo elements <code>:before</code> and <code>:after</code> for changing the appearance of checkboxes and radio buttons. it's works like a charm.</p>

<p>Refer this <a href="https://www.w3schools.com/howto/howto_css_custom_checkbox.asp" rel="noreferrer"><strong>link</strong></a> for more info</p>

<p><a href="https://codepen.io/jinukurian7/pen/NWPrZqr" rel="noreferrer"><strong>CODEPEN</strong></a></p>

<p><strong>Steps</strong></p>

<ol>
<li>Hide the default checkbox using css rules like <code>visibility:hidden</code> or <code>opacity:0</code> or <code>position:absolute;left:-9999px</code> etc.</li>
<li>Create a fake checkbox using <code>:before</code> element and pass either an empty or a non-breaking space <code>'\00a0'</code>;</li>
<li>When the checkbox is in <code>:checked</code> state, pass the unicode <code>content: "\2713"</code>, which is a checkmark;</li>
<li>Add <code>:focus</code> style to make the checkbox accessible.</li>
<li>Done</li>
</ol>

<p>Here is how I did it.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content"&gt;
  &lt;div class="box"&gt;
    &lt;p&gt;
      &lt;input type="checkbox" id="c1" name="cb"&gt;
      &lt;label for="c1"&gt;Option 01&lt;/label&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;input type="checkbox" id="c2" name="cb"&gt;
      &lt;label for="c2"&gt;Option 02&lt;/label&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;input type="checkbox" id="c3" name="cb"&gt;
      &lt;label for="c3"&gt;Option 03&lt;/label&gt;
    &lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>Much more stylish using <code>:before</code> and <code>:after</code></strong> </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt; 
  &lt;div class="checkbox"&gt;
     &lt;input type="checkbox" id="checkbox" name="" value=""&gt;
     &lt;label for="checkbox"&gt;&lt;span&gt;Checkbox&lt;/span&gt;&lt;/label&gt;
  &lt;/div&gt;

  &lt;div class="checkbox"&gt;
     &lt;input type="checkbox" id="checkbox2" name="" value=""&gt;
     &lt;label for="checkbox2"&gt;&lt;span&gt;Checkbox&lt;/span&gt;&lt;/label&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1315789|text|您可以使用iCheck。它是为jQuery和Zepto定制的复选框和单选按钮，也许它会对你有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1315790|确保在icheck.js之前加载jQuery+v1.7%2B|1315791|选择配色方案，有10种不同的风格可供选择:+minimal.css|1315792|Red+-+green.css|unordered-list-item|1315793|
|1315794|Blue+--|1315795|--+grey.css|ordered-list-item|1315796|Orange+-+orange.css|1315797|Yellow+-+yellow.css|1315798|Pink+-+pink.css|1315799|Purple+-+purple.css|1315800|1315801|+-red.css|1315802|1315803|1315804|1315805|​|1315806|1315807|将/+icheck.js+/minimal/文件夹和icheck.js文件复制到您的站点。在|1315808|之前插入(替换-path并将一些复选框和单选按钮插入到您的HTML：|1315809|1315810|1315811|将JavaScript添加到您的HTML以启动iCheck插件:对于与黑色配色方案不同的|1315812|1315813|，请使用此代码(例如Red):|1315814|1315815|Done|1315816|1315817|entityMap|0|LINK|mutability|MUTABLE|url|http://icheck.fronteed.com/^0|5|6|0|0|0|0|0|0|0|1|1|1|1|1|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1V|8|@]|9|@$A|1W|B|1X|1|1Y]]|C|$]]|$1|D|3|E|5|6|7|1Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|20|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|21|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|22|8|@]|9|@]|C|$]]|$1|M|3|N|5|J|7|23|8|@]|9|@]|C|$]]|$1|O|3|P|5|Q|7|24|8|@]|9|@]|C|$]]|$1|R|3|S|5|J|7|25|8|@]|9|@]|C|$]]|$1|T|3|U|5|J|7|26|8|@]|9|@]|C|$]]|$1|V|3|W|5|J|7|27|8|@]|9|@]|C|$]]|$1|X|3|Y|5|J|7|28|8|@]|9|@]|C|$]]|$1|Z|3|-4|5|6|7|29|8|@]|9|@]|C|$]]|$1|10|3|11|5|6|7|2A|8|@]|9|@]|C|$]]|$1|12|3|L|5|6|7|2B|8|@]|9|@]|C|$]]|$1|13|3|-4|5|J|7|2C|8|@]|9|@]|C|$]]|$1|14|3|-4|5|6|7|2D|8|@]|9|@]|C|$]]|$1|15|3|16|5|6|7|2E|8|@]|9|@]|C|$]]|$1|17|3|-4|5|6|7|2F|8|@]|9|@]|C|$]]|$1|18|3|19|5|Q|7|2G|8|@]|9|@]|C|$]]|$1|1A|3|1B|5|Q|7|2H|8|@]|9|@]|C|$]]|$1|1C|3|-4|5|6|7|2I|8|@]|9|@]|C|$]]|$1|1D|3|-4|5|6|7|2J|8|@]|9|@]|C|$]]|$1|1E|3|1F|5|J|7|2K|8|@]|9|@]|C|$]]|$1|1G|3|L|5|6|7|2L|8|@]|9|@]|C|$]]|$1|1H|3|1I|5|J|7|2M|8|@]|9|@]|C|$]]|$1|1J|3|L|5|6|7|2N|8|@]|9|@]|C|$]]|$1|1K|3|1L|5|J|7|2O|8|@]|9|@]|C|$]]|$1|1M|3|-4|5|6|7|2P|8|@]|9|@]|C|$]]|$1|1N|3|-4|5|6|7|2Q|8|@]|9|@]|C|$]]]|1O|$1P|$5|1Q|1R|1S|C|$1T|1U]]]]

<p>You can use <a href="http://icheck.fronteed.com/" rel="nofollow noreferrer">iCheck</a>. It is customized checkboxes and radio buttons for jQuery &amp; Zepto, and maybe it will help you.</p>

<p>Make sure jQuery v1.7+ is loaded before the icheck.js</p>

<ol>
<li>Choose a color scheme, there are 10 different styles available:

<ul>
<li>Black — minimal.css</li>
<li>Red — red.css</li>
<li>Green — green.css</li>
<li>Blue — blue.css</li>
<li>Aero — aero.css</li>
<li>Grey — grey.css</li>
<li>Orange — orange.css</li>
<li>Yellow — yellow.css</li>
<li>Pink — pink.css</li>
<li>Purple — purple.css</li>
</ul></li>
<li>Copy /skins/minimal/ folder and icheck.js file to your site.</li>
<li><p>Insert before  in your HTML (replace your-path and color-scheme):</p>

<pre><code>&lt;link href="your-path/minimal/color-scheme.css" rel="stylesheet"&gt;
&lt;script src="your-path/icheck.js"&gt;&lt;/script&gt;
</code></pre>

<p>Example for a Red color scheme:</p>

<pre><code>&lt;link href="your-path/minimal/red.css" rel="stylesheet"&gt;
&lt;script src="your-path/icheck.js"&gt;&lt;/script&gt;
</code></pre></li>
<li><p>Add some checkboxes and radio buttons to your HTML:</p>

<pre><code>&lt;input type="checkbox"&gt;
&lt;input type="checkbox" checked&gt;
&lt;input type="radio" name="iCheck"&gt;
&lt;input type="radio" name="iCheck" checked&gt;
</code></pre></li>
<li><p>Add JavaScript to your HTML to launch iCheck plugin:</p>

<pre><code>&lt;script&gt;
    $(document).ready(function(){
      $('input').iCheck({
        checkboxClass: 'icheckbox_minimal',
        radioClass: 'iradio_minimal',
        increaseArea: '20%' // Optional
      });
   });
&lt;/script&gt;
</code></pre></li>
<li><p>For different from black color schemes use this code (example for Red):</p>

<pre><code>&lt;script&gt;
    $(document).ready(function(){
      $('input').iCheck({
        checkboxClass: 'icheckbox_minimal-red',
        radioClass: 'iradio_minimal-red',
        increaseArea: '20%' // Optional
      });
   });
&lt;/script&gt;
</code></pre></li>
<li><p>Done</p></li>
</ol>


blocks|key|1315832|text|不需要JavaScript或jQuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1315833|简单地改变你的复选框风格。|1315834|​|1315835|input[type="checkbox"]+{
++display:+none;
++border:+none+!important;
++box-shadow:+none+!important;
}

input[type="checkbox"]+%2B+label+span+{
++background:+url(http://imgh.us/uncheck.png);
++width:+49px;
++height:+49px;
++display:+inline-block;
++vertical-align:+middle;
}

input[type="checkbox"]:checked+%2B+label+span+{
++background:+url(http://imgh.us/check_2.png);
++width:+49px;
++height:+49px;
++vertical-align:+middle;
}|code-block|syntax|javascript|1315836|<input+type="checkbox"+id="option"+/>
<label+for="option">+<span></span>+Click+me+</label>|1315837|1315838|Here+is+a+JSFiddle+link|offset|length|1315839|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/05y2bge3/^0|0|0|0|0|0|0|0|N|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|15|8|@]|9|@$P|16|Q|17|1|18]]|A|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<p>No JavaScript or jQuery required.</p>
<p>Change your checkbox style simple way.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" id="option" /&gt;
&lt;label for="option"&gt; &lt;span&gt;&lt;/span&gt; Click me &lt;/label&gt;</code></pre>
</div>
</div>
</p>
<p><a href="https://jsfiddle.net/05y2bge3/" rel="nofollow noreferrer">Here is a JSFiddle link</a></p>


blocks|key|3593110|text|用普通的CSS3修改复选框风格，不需要任何JS和HTML操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3593111|​|3593112|.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;
}|code-block|syntax|javascript|3593113|<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>|3593114|3593115|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Modify checkbox style with plain CSS3, don't required any JS&amp;HTML manipulation.  </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /&gt;

&lt;form class="form"&gt;
  &lt;input type="checkbox" /&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3593190|text|易于实施且易于定制的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3593191|经过大量的搜索和测试，我得到了这个解决方案，它实现起来很简单，而且更容易定制。此解决方案中的|3593192|3593193|你不需要外部库和文件|ordered-list-item|3593194|你不需要在你的页面中添加额外的超文本标记语言|3593195|你不需要更改复选框的名称和id|3593196|3593197|只需将流畅的CSS放在页面顶部，所有复选框的样式都会像这样改变：|3593198|​|3593199|📷|atomic|offset|length|3593200|3593201|3593202|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+{
++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+{
++content:+"\2714";
++padding:+-5px;
++font-weight:+bold;
}|code-block|syntax|javascript|3593203|<input+type="checkbox"+id="checkbox1"+/>
<label+for="checkbox1">Checkbox</label>|3593204|3593205|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/c2f5253e68d596262e6951f3bc7df66b.jpeg|imageAlt^0|0|0|0|0|0|0|0|0|0|0|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1F|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|1H|8|@]|9|@]|A|$]]|$1|H|3|I|5|G|7|1I|8|@]|9|@]|A|$]]|$1|J|3|K|5|G|7|1J|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1L|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1N|8|@]|9|@$T|1O|U|1P|1|1Q]]|A|$]]|$1|V|3|P|5|6|7|1R|8|@]|9|@]|A|$]]|$1|W|3|P|5|6|7|1S|8|@]|9|@]|A|$]]|$1|X|3|Y|5|Z|7|1T|8|@]|9|@]|A|$10|11]]|$1|12|3|13|5|Z|7|1U|8|@]|9|@]|A|$10|11]]|$1|14|3|P|5|6|7|1V|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|16|$17|$5|18|19|1A|A|$1B|1C|1D|-4]]]]

<h1>Simple to implement and easily customizable solution</h1>
<p>After a lot of search and testing I got this solution which is simple to implement and easier to customize. <strong>In this solution</strong>:</p>
<ol>
<li>You don't need external libraries and files</li>
<li>You don't need to add
extra HTML in your page</li>
<li>You don't need to change checkbox names
and id</li>
</ol>
<p>Simple put the flowing CSS at the top of your page and all checkboxes style will change like this:</p>
<p><a href="https://i.stack.imgur.com/hclvc.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/hclvc.jpg" alt="Enter image description here" /></a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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 {
  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 {
  content: "\2714";
  padding: -5px;
  font-weight: bold;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" id="checkbox1" /&gt;
&lt;label for="checkbox1"&gt;Checkbox&lt;/label&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2058449|text|您可以避免添加额外的标记。通过设置CSS+appearance，它适用于除桌面版IE以外的任何地方(但适用于Windows+Phone和Microsoft+Edge版IE|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2058450|​|2058451|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;
}|code-block|syntax|javascript|2058452|<input+type="checkbox"+/>|2058453|2058454|entityMap^0|L|A|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>You can avoid adding extra markup. This works everywhere except IE for Desktop (but works in IE for Windows Phone and Microsoft Edge) via setting CSS <code>appearance</code>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2062499|text|也是一个简单而轻量级的模板：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2062500|​|2062501|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;
}|code-block|syntax|javascript|2062502|<input+type="checkbox"+checked="checked">checked1<br>
<input+type="checkbox">unchecked2<br>
<input+type="checkbox"+checked="checked"+id="id1">
<label+for="id1">checked2%2Blabel</label><br>
<label+for="id2">unchecked2%2Blabel%2Brtl</label>
<input+type="checkbox"+id="id2">
<br>|2062503|2062504|https://jsfiddle.net/rvgccn5b/|offset|length|2062505|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|U|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|11|8|@]|9|@$N|12|O|13|1|14]]|A|$]]|$1|P|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|M]]]]

<p>A simple and lightweight template as well:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" checked="checked"&gt;checked1&lt;br&gt;
&lt;input type="checkbox"&gt;unchecked2&lt;br&gt;
&lt;input type="checkbox" checked="checked" id="id1"&gt;
&lt;label for="id1"&gt;checked2+label&lt;/label&gt;&lt;br&gt;
&lt;label for="id2"&gt;unchecked2+label+rtl&lt;/label&gt;
&lt;input type="checkbox" id="id2"&gt;
&lt;br&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://jsfiddle.net/rvgccn5b/" rel="nofollow noreferrer">https://jsfiddle.net/rvgccn5b/</a></p>


blocks|key|3593317|text|因为像Edge和Firefox这样的浏览器不支持:before+:after+on+checkbox+input标签，所以这里有一种完全使用HTML和CSS的替代方案。当然，你应该根据你的需求来编辑CSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3593318|创建HTML+for复选框，如下所示：|3593319|<div+class='custom-checkbox'>
++++<input+type='checkbox'+/>
++++<label>
++++++++<span></span>
++++++++Checkbox+label
++++</label>
</div>|code-block|syntax|javascript|3593320|将此样式应用于复选框以更改颜色标签|3593321|<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%2Blabel+{
++++++++position:+relative;
++++++++left:+0;
++++++++top:+0;
++++++++padding-left:+25px;
++++++++color:+black;
++++}
++++.custom-checkbox+input%2Blabel+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%2Blabel+{+/*+change+label+color+when+checked+*/
++++++++color:+orange;
++++}
++++.custom-checkbox+input:checked%2Blabel+span{+/*+change+span+box+color+when+checked+*/
++++++++background-color:+orange;
++++++++border:+1px+solid+orange;
++++}
</style>|3593322|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Since browsers like Edge and Firefox do not support :before :after on checkbox input tags, here is an alternative purely with HTML and CSS. Of course you should edit CSS according to your requirements.</p>

<p>Make the HTML for checkbox like this:</p>

<pre><code>&lt;div class='custom-checkbox'&gt;
    &lt;input type='checkbox' /&gt;
    &lt;label&gt;
        &lt;span&gt;&lt;/span&gt;
        Checkbox label
    &lt;/label&gt;
&lt;/div&gt;
</code></pre>

<p>Apply this style for the checkbox to change the color label</p>

<pre><code>&lt;style&gt;
    .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;
    }
&lt;/style&gt;
</code></pre>


blocks|key|1315966|text|似乎你可以只使用CSS来改变灰度复选框的颜色。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1315967|下面的代码将复选框从黑色转换为灰色(这正是我想要的)：|1315968|input[type="checkbox"]+{
++++opacity:+.5;
}|code-block|syntax|javascript|1315969|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>It seems you can change the colour of the checkbox in grayscale by using CSS only.</p>

<p>The following converts the checkboxes from black to gray (which was about what I wanted):</p>

<pre><code>input[type="checkbox"] {
    opacity: .5;
}
</code></pre>


blocks|key|5004664|text|我的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5004665|​|5004666|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%25);
}

input[type="checkbox"]:disabled+{
++background:+#e6e6e6;
++opacity:+0.6;
++pointer-events:+none;
}

input[type="checkbox"]:after+{
++content:+'';
++position:+relative;
++left:+40%25;
++top:+20%25;
++width:+15%25;
++height:+40%25;
++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;
}|code-block|syntax|javascript|5004667|<input+type="checkbox"><br>
<input+type="checkbox"+checked><br>
<input+type="checkbox"+disabled><br>
<input+type="checkbox"+disabled+checked><br>|5004668|5004669|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<h2>My solution</h2>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox"&gt;&lt;br&gt;
&lt;input type="checkbox" checked&gt;&lt;br&gt;
&lt;input type="checkbox" disabled&gt;&lt;br&gt;
&lt;input type="checkbox" disabled checked&gt;&lt;br&gt;</code></pre>
</div>
</div>
</p>


blocks|key|5004682|text|根据我的googling搜索，这是设置checkbox样式的最简单方法。只需根据您的设计添加:after和:checked:after+CSS。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5004683|​|5004684|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;
}|code-block|syntax|javascript|5004685|<input+type="checkbox">+<span>Select+Text</span>|5004686|5004687|entityMap^0|1A|6|1H|E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>From my googling, this is the easiest way for checkbox styling. Just add <code>:after</code> and <code>:checked:after</code> CSS based on your design. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox"&gt; &lt;span&gt;Select Text&lt;/span&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2058529|text|对于纯CSS，:before和:after没有什么花哨的东西，没有转换，你可以关闭默认的外观，然后用一个内联的背景图像来样式化它，如下例所示。这适用于Chrome、Firefox、Safari以及现在的Edge+(Chromium+Edge)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2058530|​|2058531|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%2BAC73WHIsw0UCjglraO20PNhYAOw==")+3px+3px+no-repeat;
}|code-block|syntax|javascript|2058532|<form>
++<label><input+type="checkbox">+I+Agree+To+Terms+&amp;+Conditions</label>
</form>|2058533|2058534|entityMap^0|7|7|F|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>With pure CSS, nothing fancy with <code>:before</code> and <code>:after</code>, no transforms, you can turn off the default appearance and then style it with an inline background image like the following example. This works in Chrome, Firefox, Safari, and now Edge (Chromium Edge).</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
  &lt;label&gt;&lt;input type="checkbox"&gt; I Agree To Terms &amp;amp; Conditions&lt;/label&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3593435|text|您可以在现代浏览器上简单地使用appearance:+none，这样就没有默认样式，所有样式都可以正确应用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3593436|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;
}|code-block|syntax|javascript|3593437|entityMap^0|F|G|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>You can simply use <code>appearance: none</code> on modern browsers, so that there is no default styling and all your styles are applied properly:</p>

<pre><code>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;
}
</code></pre>


blocks|key|3593464|text|带有CSS的自定义复选框(仅限WebKit浏览器解决方案Chrome、Safari、移动浏览器)|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3593465|<input+type="checkbox"+id="cardAccptance"+name="cardAccptance"+value="Yes">
<label+for="cardAccptance"+class="bold">+Save+Card+for+Future+Use</label>|code-block|syntax|javascript|3593466|CSS：|3593467|++++/*+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;
++++}|3593468|entityMap^0|6|16|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p><strong>Custom checkbox with CSS</strong>  (WebKit browser solution only Chrome, Safari, Mobile browsers)</p>
<pre><code>&lt;input type=&quot;checkbox&quot; id=&quot;cardAccptance&quot; name=&quot;cardAccptance&quot; value=&quot;Yes&quot;&gt;
&lt;label for=&quot;cardAccptance&quot; class=&quot;bold&quot;&gt; Save Card for Future Use&lt;/label&gt;
</code></pre>
<p>CSS:</p>
<pre><code>    /* 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: &quot;&quot;;
        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;
    }
</code></pre>


blocks|key|2062608|text|SCSS+/+SASS实施|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2062609|一种更现代的方法|2062610|对于那些使用SCSS+(或者很容易转换为SASS)的人来说，以下内容将会很有帮助。实际上，在复选框旁边创建一个元素，这是您要设置样式的元素。单击复选框时，CSS会重新设置姊妹元素的样式(调整为新的选中样式)。代码如下：|2062611|​|2062612|label.checkbox+{
++input[type="checkbox"]+{
++++visibility:+hidden;
++++display:+block;
++++height:+0;
++++width:+0;
++++position:+absolute;
++++overflow:+hidden;

++++&:checked+%2B+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;
++}
}|code-block|syntax|javascript|2062613|<label+class="checkbox">
++++<input+type="checkbox"+/>
++++<span></span>
++++Label+text
</label>|2062614|2062615|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|V|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<h1>SCSS / SASS Implementation</h1>

<h2>A more modern approach</h2>

<p>For those using SCSS (or easily converted to SASS), the following will be helpful. Effectively, make an element next to the checkbox, which is the one that you will style. When the checkbox is clicked, the CSS restyles the sister element (to your new, checked style). Code is below:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>label.checkbox {
  input[type="checkbox"] {
    visibility: hidden;
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    overflow: hidden;

    &amp;: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;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label class="checkbox"&gt;
    &lt;input type="checkbox" /&gt;
    &lt;span&gt;&lt;/span&gt;
    Label text
&lt;/label&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1316041|text|下面是一个支持主题的示例。这是一种使用CSS转换的现代方法。绝对不需要JavaScript。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1316042|关于一个相关的问题，我推导出了这个comment中链接的以下代码。|offset|length|1316043|编辑：我添加了单选按钮，作为maxshuty+suggests。|style|BOLD|1316044|​|1316045|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)+%7C%7C+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();|code-block|syntax|javascript|1316046|/*+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%25;
++height:+100%25;
}

body+{
++/*background:+var(--background-color);+--+For+demo,+moved+to+column.+*/
++/*color:++++++var(--font-color);+++++++--+For+demo,+moved+to+column.+*/
++background:+#777;
++width:+calc(100%25+-+0.5em);
++height:+calc(100%25+-+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%25;
++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%25;
++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%25;
++height:+100%25;
}


/*+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%25;
++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%25;
++position:+absolute;
++text-align:+center;
++content:+"\2713";
++color:+var(--checkbox-checkmark-color);
++line-height:+1.1em;
}

.radio-wrapper+.pip:after+{
++display:+none;
++width:+100%25;
++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;
}|1316047|<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+%2B+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>|1316048|1316049|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/34388696/how-to-change-the-background-color-on-a-input-checkbox-with-css#comment89877803_34389136|1|https://stackoverflow.com/a/58570835/1762224^0|0|H|7|0|0|0|3|N|8|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@$D|17|E|18|1|19]]|A|$]]|$1|F|3|G|5|6|7|1A|8|@$D|1B|E|1C|H|I]]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|J|3|K|5|6|7|1G|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1H|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|1I|8|@]|9|@]|A|$O|P]]|$1|S|3|T|5|N|7|1J|8|@]|9|@]|A|$O|P]]|$1|U|3|K|5|6|7|1K|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]|13|$5|Y|Z|10|A|$11|14]]]]

<p>Here is an example, with theme support. It is a modern approach with CSS transitions. There is absolutely no JavaScript required.</p>

<p>I derived the following code linked in this <a href="https://stackoverflow.com/questions/34388696/how-to-change-the-background-color-on-a-input-checkbox-with-css#comment89877803_34389136">comment</a>; on a related question.</p>

<p><strong>Edit:</strong> I added radio buttons, as maxshuty <a href="https://stackoverflow.com/a/58570835/1762224">suggests</a>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const selector = '.grid-container &gt; .grid-row &gt; .grid-col[data-theme="retro"]';
const main = () =&gt; {
  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 =&gt; {
      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();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" /&gt;
&lt;div class="grid-container"&gt;
  &lt;div class="grid-row"&gt;
    &lt;div class="grid-col"&gt;
      &lt;div class="grid-cell"&gt;
        &lt;h1&gt;Pure CSS&lt;/h1&gt;
        &lt;h2&gt;Checkbox&lt;/h2&gt;
        &lt;label class="checkbox-wrapper"&gt;One
          &lt;input type="checkbox" checked="checked"&gt;
          &lt;span class="checkmark"&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;label class="checkbox-wrapper"&gt;Two
          &lt;input type="checkbox"&gt;
          &lt;span class="checkmark"&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;label class="checkbox-wrapper"&gt;Three
          &lt;input type="checkbox" checked disabled&gt;
          &lt;span class="checkmark"&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;label class="checkbox-wrapper"&gt;Four
          &lt;input type="checkbox" disabled&gt;
          &lt;span class="checkmark"&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;h2&gt;Radio&lt;/h2&gt;
        &lt;label class="radio-wrapper"&gt;One
          &lt;input type="radio" name="group-x"&gt;
          &lt;span class="pip"&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;label class="radio-wrapper"&gt;Two
          &lt;input type="radio" name="group-x"&gt;
          &lt;span class="pip"&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;label class="radio-wrapper"&gt;Three
          &lt;input type="radio" name="group-x" checked disabled&gt;
          &lt;span class="pip"&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;label class="radio-wrapper"&gt;Four
          &lt;input type="radio" name="group-x" disabled&gt;
          &lt;span class="pip"&gt;&lt;/span&gt;
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="grid-col" data-theme="dark"&gt;
      &lt;div class="grid-cell"&gt;
        &lt;h1&gt;Pure CSS&lt;/h1&gt;
        &lt;h2&gt;Checkbox&lt;/h2&gt;
        &lt;label class="checkbox-wrapper"&gt;One
          &lt;input type="checkbox" checked="checked"&gt;
          &lt;span class="checkmark"&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;label class="checkbox-wrapper"&gt;Two
          &lt;input type="checkbox"&gt;
          &lt;span class="checkmark"&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;label class="checkbox-wrapper"&gt;Three
          &lt;input type="checkbox" checked disabled&gt;
          &lt;span class="checkmark"&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;label class="checkbox-wrapper"&gt;Four
          &lt;input type="checkbox" disabled&gt;
          &lt;span class="checkmark"&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;h2&gt;Radio&lt;/h2&gt;
        &lt;label class="radio-wrapper"&gt;One
          &lt;input type="radio" name="group-y"&gt;
          &lt;span class="pip"&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;label class="radio-wrapper"&gt;Two
          &lt;input type="radio" name="group-y"&gt;
          &lt;span class="pip"&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;label class="radio-wrapper"&gt;Three
          &lt;input type="radio" name="group-y" checked disabled&gt;
          &lt;span class="pip"&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;label class="radio-wrapper"&gt;Four
          &lt;input type="radio" name="group-y" disabled&gt;
          &lt;span class="pip"&gt;&lt;/span&gt;
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="grid-col" data-theme="retro"&gt;
      &lt;div class="grid-cell"&gt;
        &lt;h1&gt;JS + CSS&lt;/h1&gt;
        &lt;h2&gt;Checkbox&lt;/h2&gt;
        &lt;label&gt;One   &lt;input type="checkbox" checked="checked"&gt;&lt;/label&gt;
        &lt;label&gt;Two   &lt;input type="checkbox"&gt;&lt;/label&gt;
        &lt;label&gt;Three &lt;input type="checkbox" checked disabled&gt;&lt;/label&gt;
        &lt;label&gt;Four  &lt;input type="checkbox" disabled&gt;&lt;/label&gt;
        &lt;h2&gt;Radio&lt;/h2&gt;
        &lt;label&gt;One   &lt;input type="radio" name="group-z" checked="checked"&gt;&lt;/label&gt;
        &lt;label&gt;Two   &lt;input type="radio" name="group-z"&gt;&lt;/label&gt;
        &lt;label&gt;Three &lt;input type="radio" name="group-z" checked disabled&gt;&lt;/label&gt;
        &lt;label&gt;Four  &lt;input type="radio" name="group-z" disabled&gt;&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3593594|text|这是一个带有一些动画和简单样式的现代版本，您可以自定义：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3593595|.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);
}|code-block|syntax|javascript|3593596|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here's a modern version with a little animation, and simple styling you can customize:</p>
<pre><code>.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);
}
</code></pre>


blocks|key|1314163|text|通过使用带有自定义样式表的Materialize，您可以实现如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1314164|CSS代码|style|BOLD|1314165|.custom_checkbox[type="checkbox"]:checked+%2B+span:not(.lever)::before+{
++border:+2px+solid+transparent;
++border-bottom:+2px+solid+#ffd600;
++border-right:+2px+solid+#ffd600;
++background:+transparent;
}|code-block|syntax|javascript|1314166|HTML代码|1314167|<label>
++++<input+type="checkbox"+class="custom_checkbox"+/>
++++<span>Text</span>
</label>|1314168|演示|1314169|JSFiddle+demo|1314170|entityMap|0|LINK|mutability|MUTABLE|url|https://materializecss.com/|1|https://jsfiddle.net/mitma/ge07rz3a/^0|D|B|0|0|0|5|0|0|0|6|0|0|0|2|0|0|D|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|D|3|E|5|6|7|18|8|@$A|19|B|1A|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|1B|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1C|8|@$A|1D|B|1E|F|G]]|9|@]|C|$]]|$1|O|3|P|5|J|7|1F|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1G|8|@$A|1H|B|1I|F|G]]|9|@]|C|$]]|$1|S|3|T|5|6|7|1J|8|@]|9|@$A|1K|B|1L|1|1M]]|C|$]]|$1|U|3|-4|5|6|7|1N|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]|12|$5|X|Y|Z|C|$10|13]]]]

<p>By using <a href="https://materializecss.com/" rel="nofollow noreferrer">Materialize</a> with a custom stylesheet, you can achieve something like this:</p>
<p><strong>CSS code</strong></p>
<pre><code>.custom_checkbox[type=&quot;checkbox&quot;]:checked + span:not(.lever)::before {
  border: 2px solid transparent;
  border-bottom: 2px solid #ffd600;
  border-right: 2px solid #ffd600;
  background: transparent;
}
</code></pre>
<p><strong>HTML code</strong></p>
<pre><code>&lt;label&gt;
    &lt;input type=&quot;checkbox&quot; class=&quot;custom_checkbox&quot; /&gt;
    &lt;span&gt;Text&lt;/span&gt;
&lt;/label&gt;
</code></pre>
<p><strong>Demo</strong></p>
<p><a href="https://jsfiddle.net/mitma/ge07rz3a/" rel="nofollow noreferrer">JSFiddle demo</a></p>


blocks|key|3593669|text|这将使虚线边框，以及您所寻找的背景，而且，如果你想设置一个特定的背景颜色时选中，只需设置它在适当的地方在下面的例子中为您的问题:)此解决方案还设置在自定义复选标记图标，等等。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3593670|对于像这样的html元素：<input+type="checkbox"+/>|offset|length|style|CODE|3593671|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%25;
++border:+1px+dotted+rgb(60,69,77,0.9);
++box-shadow:+none;
++font-size:+1em;
}|code-block|syntax|javascript|3593672|entityMap^0|0|D|P|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This will make the dotted border, aswell as the background your seeking, also, if you want to set a specific background color for when checked, simply set it where apropriate in below example for your issue :)
This solution also sets in a custom checkmark icon, etc.</p>
<p>for an html element like:
<code>&lt;input type=&quot;checkbox&quot; /&gt;</code></p>
<pre><code>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;
}
</code></pre>


blocks|key|1314218|text|CSS+Basic+User+Interface+Module+Level+4通过一个名为accent-color的新解决方案添加了对此(最终)的支持，而且它实际上非常简单，与这里的几乎所有其他答案不同：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1314219|​|1314220|input+{
++++accent-color:+rebeccapurple;
}|code-block|syntax|javascript|1314221|<input+type="checkbox"+/>|1314222|1314223|只需设置任何CSS颜色(例如，命名值、十六进制代码等)您想要作为accent-color的值，它将被应用。|1314224|目前在Chrome+(v93%2B)、Edge+(v93%2B)、火狐(v92%2B)、Opera+(v79%2B)和Safari的技术预览版(v135%2B)中都可以使用。在Safari的生产版本中仍然缺乏支持。|1314225|注意:+Edge、Chrome和Opera+(可能还有Safari+Tech+Preview；我不能测试这一点)目前也不支持通过rgba()的alpha通道值(+rgba()的RGB值仍将“工作”；alpha通道将被浏览器忽略)。有关详细信息，请参阅MDN+Browser+Support。|1314226|entityMap|0|LINK|mutability|MUTABLE|url|https://drafts.csswg.org/css-ui/#widget-accent|1|https://developer.apple.com/safari/technology-preview/release-notes/#r135|2|https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color#browser_compatibility^0|19|C|0|13|0|0|0|0|0|0|W|C|0|1S|4|1|0|1S|6|29|6|3H|J|2|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|F|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1G|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1K|8|@]|D|@$9|1L|A|1M|1|1N]]|E|$]]|$1|T|3|U|5|6|7|1O|8|@$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]]|D|@$9|1T|A|1U|1|1V]]|E|$]]|$1|V|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]]|W|$X|$5|Y|Z|10|E|$11|12]]|13|$5|Y|Z|10|E|$11|14]]|15|$5|Y|Z|10|E|$11|16]]]]

<p>The <a href="https://drafts.csswg.org/css-ui/#widget-accent" rel="noreferrer">CSS Basic User Interface Module Level 4</a> adds support for this (finally) via a new solution called <code>accent-color</code>, and it's <em>actually</em> quite simple, unlike pretty much every other answer here:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input {
    accent-color: rebeccapurple;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" /&gt;</code></pre>
</div>
</div>
</p>
<p>Simply set whatever CSS color (e.g. named value, hex code, etc.) you want in as the value of <code>accent-color</code>, and it will be applied.</p>
<p>This currently works in Chrome (v93+), Edge (v93+), Firefox (v92+), Opera (v79+), and Safari's Technology Preview (<a href="https://developer.apple.com/safari/technology-preview/release-notes/#r135" rel="noreferrer">v135</a>+). Support is still lacking in the production version of Safari.</p>
<p>Note: Edge, Chrome, and Opera (and possibly Safari Tech Preview; I can't test that) currently don't support alpha channel values via <code>rgba()</code> either (the RGB values of <code>rgba()</code> will still &quot;work&quot;; the alpha channel will simply be ignored by the browser). See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color#browser_compatibility" rel="noreferrer">MDN Browser Support</a> for more information.</p>


blocks|key|2062708|text|<!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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2062709|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;style&gt;
/* 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: &quot;&quot;;
  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);
}
&lt;/style&gt;
&lt;body&gt;

&lt;h1&gt;Custom Checkboxes&lt;/h1&gt;
&lt;label class=&quot;container&quot;&gt;One
  &lt;input type=&quot;checkbox&quot; checked=&quot;checked&quot;&gt;
  &lt;span class=&quot;checkmark&quot;&gt;&lt;/span&gt;
&lt;/label&gt;
&lt;label class=&quot;container&quot;&gt;Two
  &lt;input type=&quot;checkbox&quot;&gt;
  &lt;span class=&quot;checkmark&quot;&gt;&lt;/span&gt;
&lt;/label&gt;
&lt;label class=&quot;container&quot;&gt;Three
  &lt;input type=&quot;checkbox&quot;&gt;
  &lt;span class=&quot;checkmark&quot;&gt;&lt;/span&gt;
&lt;/label&gt;
&lt;label class=&quot;container&quot;&gt;Four
  &lt;input type=&quot;checkbox&quot;&gt;
  &lt;span class=&quot;checkmark&quot;&gt;&lt;/span&gt;
&lt;/label&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|3593790|text|隐藏输入并向下一个创建复选框等效项的元素添加before|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3593791|input[type="checkbox"]+{
++display:+none;++++
}

input[type="checkbox"]+%2B+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+%2B+label:before+{
++background-image:+url("data:image/svg%2Bxml;charset=utf8,%253Csvg+xmlns='http://www.w3.org/2000/svg'+viewBox='0+0+8+8'%253E%253Cpath+fill='%2523fff'+d='M6.564.75l-3.59+3.612-1.538-1.55L0+4.26+2.974+7.25+8+2.193z'/%253E%253C/svg%253E");
}|code-block|syntax|javascript|3593792|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Hide the input and add a before to the next element that create a checkbox equivalent</p>
<pre><code>input[type=&quot;checkbox&quot;] {
  display: none;    
}

input[type=&quot;checkbox&quot;] + 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=&quot;checkbox&quot;]:checked + label:before {
  background-image: url(&quot;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&quot;);
}
</code></pre>


blocks|key|2058717|text|这帮助我更改了checkbox的样式(颜色|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2058718|input[type=checkbox]+{
++accent-color:+red;
}|code-block|syntax|javascript|2058719|我们也可以对单选按钮使用相同的方法。|2058720|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This helped me to change style (color) for checkbox</p>
<pre><code>input[type=checkbox] {
  accent-color: red;
}
</code></pre>
<p>We can also use the same for radio buttons.</p>


<p>I am trying to style a checkbox using the following:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" /&gt;</code></pre>
</div>
</div>
</p>

<p>But the style is not applied. The checkbox still displays its default style. How do I give it the specified style?</p>


How to style a checkbox using CSS

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试使用以下内容设置复选框的样式：​<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />​但不应用该样式。该复选框仍显示其默认样式。我如何给它指定的样式？

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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