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

Question

我正在尝试使用以下方式设置复选框的样式：

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

但是没有应用这种风格。该复选框仍显示其默认样式。我如何给它指定的样式？

Answer 1

更新： 以下答案引用了CSS3广泛可用之前的状态。在现代浏览器（包括Internet Explorer 9及更高版本）中，使用首选样式创建复选框替换更为直接，而不使用javascript。

以下是一些有用的链接：

• Creating Custom Form Checkboxes with Just CSS
• Easy CSS Checkbox Generator
• Stuff You Can Do With The Checkbox Hack
• Implementing Custom Checkboxes and Radio Buttons with CSS3
• How to Style a Checkbox With CSS

值得注意的是，根本问题没有改变。您仍然无法将样式（边框等）直接应用于复选框元素，并使这些样式影响HTML复选框的显示。然而，改变的是现在可以隐藏实际的复选框并用你自己的样式元素替换它，只使用CSS。特别是，因为CSS现在有一个广泛支持的:checked选择器，您可以使您的替换正确反映该框的已检查状态。

---

老人的答案

这是a useful article about styling checkboxes。基本上，作者发现它在浏览器与浏览器之间存在巨大差异，并且无论您如何设置样式，许多浏览器始终显示默认复选框。所以真的没有一个简单的方法。

不难想象一种解决方法，您可以使用javascript在复选框上叠加图像，并点击该图像会导致检查真实的复选框。没有javascript的用户会看到默认复选框。

编辑添加：这里是a nice script that does this for you;它隐藏了真正的复选框元素，用样式化的span替换它，并重定向点击事件。

Answer 2

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

CSS：

.myCheckbox input {
    // display: none;
    // Better than display: none for accessibility reasons
    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");
}

HTML：

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

Answer 3

通过使用:after和:before伪类附带的新功能，您可以实现非常酷的自定义复选框效果。这样做的好处是：您不需要向DOM添加任何其他内容，只需添加标准复选框。

请注意，这仅适用于兼容的浏览器，我认为这与某些浏览器不允许您在输入元素上设置:after和:before这一事实有关。遗憾的是，目前只支持webkit浏览器。 FF + IE仍然允许复选框运行，只是没有样式，这有望在未来发生变化（代码不使用供应商前缀）。

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

See Example Fiddle

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

/* Main Classes */
.myinput[type="checkbox"]:before {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid #808080;
  content: "";
  background: #FFF;
}

.myinput[type="checkbox"]:after {
  position: relative;
  display: block;
  left: 2px;
  top: -11px;
  width: 7px;
  height: 7px;
  border-width: 1px;
  border-style: solid;
  border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
  content: "";
  background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
  background-repeat: no-repeat;
  background-position: center;
}

.myinput[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput[type="checkbox"]:disabled:after {
  -webkit-filter: opacity(0.4);
}

.myinput[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}

.myinput[type="checkbox"]:not(:disabled):hover:after {
  background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
  border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
}

.myinput[type="checkbox"]:not(:disabled):hover:before {
  border-color: #3D7591;
}

/* Large checkboxes */
.myinput.large {
  height: 22px;
  width: 22px;
}

.myinput.large[type="checkbox"]:before {
  width: 20px;
  height: 20px;
}

.myinput.large[type="checkbox"]:after {
  top: -20px;
  width: 16px;
  height: 16px;
}

/* Custom checkbox */
.myinput.large.custom[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table style="width:100%">
  <tr>
    <td>Normal:</td>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" checked="checked" /></td>
    <td><input type="checkbox" disabled="disabled" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" /></td>
  </tr>
  <tr>
    <td>Small:</td>
    <td><input type="checkbox" class="myinput" /></td>
    <td><input type="checkbox" checked="checked" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput" /></td>
  </tr>
  <tr>
    <td>Large:</td>
    <td><input type="checkbox" class="myinput large" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /></td>
  </tr>
  <tr>
    <td>Custom icon:</td>
    <td><input type="checkbox" class="myinput large custom" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /></td>
  </tr>
</table>

Bonus Webkit style flipswitch fiddle

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

body {
  font-family: arial;
}

.flipswitch {
  position: relative;
  background: white;
  width: 120px;
  height: 40px;
  -webkit-appearance: initial;
  border-radius: 3px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  font-size: 14px;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #ddd;
}

.flipswitch:after {
  position: absolute;
  top: 5%;
  display: block;
  line-height: 32px;
  width: 45%;
  height: 90%;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.3s ease-in 0s;
  color: black;
  border: #888 1px solid;
  border-radius: 3px;
}

.flipswitch:after {
  left: 2%;
  content: "OFF";
}

.flipswitch:checked:after {
  left: 53%;
  content: "ON";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<h2>Webkit friendly mobile-style checkbox/flipswitch</h2>
<input type="checkbox" class="flipswitch" /> &nbsp;
<span></span>
<br>
<input type="checkbox" checked="checked" class="flipswitch" /> &nbsp;
<span></span>

Answer 4

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

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

首先，在样式复选框方面有很多方法。基本原则是：

1. 您需要隐藏由浏览器设置样式的默认复选框控件，并且无法使用CSS以任何有意义的方式覆盖。

2. 隐藏控件后，您仍需要能够检测并切换其检查状态

3. 需要通过设置新元素的样式来反映复选框的选中状态

解决方案（原则上）

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

1. 在label元素中包含您的复选框。这意味着即使隐藏它，您仍然可以在点击标签内的任何位置时切换其检查状态。

2. 隐藏您的复选框

3. 在复选框后添加一个新元素，您将相应地设置样式。它必须出现在复选框之后，因此可以使用CSS选择它并根据:checked状态设置样式。 CSS无法选择“向后”。

解决方案（代码中）

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

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

细化（使用图标）

但是嘿！我听到你大声喊叫。如果我想在盒子里显示一个漂亮的小刻度或十字架怎么样？我不想使用背景图片！

嗯，这就是CSS3的伪元素可以发挥作用的地方。这些属性支持content属性，允许您注入代表任一状态的unicode icons。或者，您可以使用第三方字体图标源，例如字体真棒（但请确保您还设置了相关的font-family，例如FontAwesome）

label input {
  display: none; /* hide the default checkbox */
}

/* style the artificial checkbox */
label span {
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
  position: relative;
}

/* style its checked state..with a ticked icon */
[type=checkbox]:checked + span:before {
  content: '\2714';
  position: absolute;
  top: -5px;
  left: 0;
}

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

Answer 5

我遵循SW4's answer的建议 - 隐藏复选框并用自定义范围覆盖它，建议使用此HTML

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

包装标签整齐地允许点击文本而不需要＆＃34; for-id＆＃34;属性链接。然而，

不要使用visibility: hidden或display: none

隐藏它

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

cobberboy's answer建议Font Awesome通常比位图更好，因为字体是可缩放的矢量。使用上面的HTML，我建议使用这些CSS规则：

1. 隐藏复选框

   input[type="checkbox"] {
     position: absolute;
     opacity: 0;
     z-index: -1;
   }
   

   我只使用负z-index，因为我的示例使用足够大的复选框皮肤来完全覆盖它。我不推荐left: -999px，因为它不能在每个布局中重复使用。 Bushan wagh's answer提供了一种防弹方式来隐藏它并说服浏览器使用tabindex，因此它是一个不错的选择。无论如何，两者都只是一个黑客。今天的正确方法是appearance: none，请参阅Joost's answer：

   input[type="checkbox"] {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
   }
   

2. 样式复选框标签

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

3. 添加复选框皮肤

   input[type="checkbox"] + span:before {
     font: 16pt FontAwesome;
     content: '\00f096';
     display: inline-block;
     width: 16pt;
     padding: 2px 0 0 3px;
     margin-right: 0.5em;
   }
   

   \00f096是Font Awesome＆＃39; square-o，调整填充以在焦点上提供均匀的虚线轮廓（见下文）。

4. 添加复选框选中的皮肤

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

   \00f046是Font Awesome＆＃39; check-square-o，其宽度与square-o不同，这就是上面宽度样式的原因。

5. 添加焦点大纲

   input[type="checkbox"]:focus + span:before {
     outline: 1px dotted #aaa;
   }
   

   Safari没有提供此功能（请参阅@Jason Sankey的评论），您应该使用window.navigator检测浏览器，如果是Safari，则跳过它。

6. 为禁用复选框设置灰色

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

7. 在未禁用的复选框上设置悬停阴影

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

demo Fiddle

尝试将鼠标悬停在复选框上并使用 tab 和 shift + tab 移动 space 切换。

Answer 6

您可以使用label元素通过一些小技巧来设置复选框样式，如下所示：

.checkbox > input[type=checkbox] {
  visibility: hidden;
}

.checkbox {
  position: relative;
  display: block;
  width: 80px;
  height: 26px;
  margin: 0 auto;
  background: #FFF;
  border: 1px solid #2E2E2E;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.checkbox:after {
  position: absolute;
  display: inline;
  right: 10px;
  content: 'no';
  color: #E53935;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox:before {
  position: absolute;
  display: inline;
  left: 10px;
  content: 'yes';
  color: #43A047;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox label {
  position: absolute;
  display: block;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 20px;
  background: #2E2E2E;
  cursor: pointer;
  transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  z-index: 1;
}

.checkbox input[type=checkbox]:checked + label {
  left: 43px;
}

<div class="checkbox">
  <input id="checkbox1" type="checkbox" value="1" />
  <label for="checkbox1"></label>
</div>

以上代码的 FIDDLE 。请注意，某些CSS在旧版本的浏览器中不起作用，但我确信那里有一些奇特的JavaScript示例！

Answer 7

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

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

1. 您不需要外部库和文件
2. 您不需要添加 页面中的额外HTML
3. 您不需要更改复选框名称 和id

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



input[type=checkbox] {
  transform: scale(1.5);
}

input[type=checkbox] {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 17px;
  visibility: hidden;
}

input[type=checkbox]:after {
  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;
}

Answer 8

您可以避免添加额外的标记。通过设置CSS appearance，除了IE for Desktop（但适用于Windows Phone和Microsoft Edge的IE）之外，它可以在任何地方使用：

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Styling checkbox */
  width: 16px;
  height: 16px;
  background-color: red;
}

input[type="checkbox"]:checked {
  background-color: green;
}

<input type="checkbox" />

Answer 9

我更喜欢使用图标字体（例如FontAwesome），因为它很容易用CSS修改颜色，并且在高像素密度设备上可以很好地扩展。所以这是另一种纯CSS变体，使用与上述类似的技术。

（下面是静态图片，因此您可以将结果可视化;有关交互式版本，请参阅JSFiddle）

与其他解决方案一样，它使用label元素。相邻的span包含我们的复选框字符。

span.bigcheck-target {
  font-family: FontAwesome; /* use an icon font for the checkbox */
}

input[type='checkbox'].bigcheck {
  position: relative;
  left: -999em; /* hide the real checkbox */
}

input[type='checkbox'].bigcheck + span.bigcheck-target:after {
  content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */
}

input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
  content: "\f046"; /* fontawesome checked box (fa-check-square-o) */
}

/* ==== optional - colors and padding to make it look nice === */
body {
  background-color: #2C3E50;
  color: #D35400;
  font-family: sans-serif;
  font-weight: 500;
  font-size: 4em; /* set this to whatever size you want */
}

span.bigcheck {
  display: block;
  padding: 0.5em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<span class="bigcheck">
  <label class="bigcheck">
    Cheese
    <input type="checkbox" class="bigcheck" name="cheese" value="yes" />
    <span class="bigcheck-target"></span>
  </label>
</span>

以下是JSFiddle。

Answer 10

这是一个相当古老的帖子，但最近我发现了一个非常有趣的解决方案。

您可以使用appearance: none;关闭其默认样式的复选框，然后像here (Example 4)所描述的那样编写自己的样式。

Example fiddle

＆＃13;

＆＃13;

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

＆＃13;

<input type="checkbox">

＆＃13;

＆＃13;

＆＃13;

不幸的是，对于我个人测试中的appearance选项，浏览器支持非常糟糕我只能使Opera和Chrome正常工作。但是，当有更好的支持或者你只想使用Chrome / Opera时，这将是保持简单的方法。

"Can I use?" link

Answer 11

这是一个简单的CSS解决方案，没有jQuery或javascript

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

input[type=checkbox] {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  visibility: hidden;
  font-size: 14px;
}

input[type=checkbox]:before {
  content: @fa-var-square-o;
  visibility: visible;
  /*font-size: 12px;*/
}

input[type=checkbox]:checked:before {
  content: @fa-var-check-square-o;
}

Answer 12

从我的谷歌搜索，这是复选框样式的最简单方法。只需添加：after和：checked：在css之后根据您的设计。

＆＃13;

＆＃13;

<input type="checkbox"> <span>Select Text</span>

＆＃13;

// constructor
function IceCream() {
  this.scoops = 0;
}

// adds scoop to ice cream
IceCream.prototype.addScoop = function() {
  const cone = this; // sets `this` to the `cone` variable
  setTimeout(function() {
    cone.scoops++; // references the `cone` variable
    console.log('scoop added!');
  }, 0.5);
};

const dessert = new IceCream();
dessert.addScoop();
console.log(dessert.scoops);

＆＃13;

＆＃13;

＆＃13;

Answer 13

我的解决方案

＆＃13;

＆＃13;

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

＆＃13;

<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>

＆＃13;

＆＃13;

＆＃13;

Answer 14

糟糕！所有这些变通方法让我得出结论，如果你想要设置样式，HTML复选框有点糟糕。

作为预警，这不是css实施。我只是想我会分享我提出的解决方法，以防其他任何人发现它有用。

---

我使用了HTML5 canvas元素。

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

缺点是，如果浏览器出于某种原因无法正确呈现，那么就没有回退。虽然这在2017年仍然是一个问题，但值得商榷。

更新

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

Object.prototype.create = function(args){
    var retobj = Object.create(this);

    retobj.constructor(args || null);

    return retobj;
}

var Checkbox = Object.seal({
    width: 0,
    height: 0,
    state: 0,
    document: null,
    parent: null,
    canvas: null,
    ctx: null,

    /*
     * args:
     * name      default             desc.
     *
     * width     15                  width
     * height    15                  height
     * document  window.document     explicit document reference
     * target    this.document.body  target element to insert checkbox into
     */
    constructor: function(args){
        if(args === null)
            args = {};

        this.width = args.width || 15;
        this.height = args.height || 15;
        this.document = args.document || window.document;
        this.parent = args.target || this.document.body;
        this.canvas = this.document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.addEventListener("click", this.ev_click(this), false);
        this.parent.appendChild(this.canvas);
        this.draw();
    },

    ev_click: function(self){
        return function(unused){
            self.state = !self.state;
            self.draw();
        }
    },

    draw_rect: function(color, offset){
        this.ctx.fillStyle = color;
        this.ctx.fillRect(offset, offset,
                this.width - offset * 2, this.height - offset * 2);
    },

    draw: function(){
        this.draw_rect("#CCCCCC", 0);
        this.draw_rect("#FFFFFF", 1);

        if(this.is_checked())
            this.draw_rect("#000000", 2);
    },

    is_checked: function(){
        return !!this.state;
    }
});

这是working demo。

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

var my_checkbox = Checkbox.create();

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

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

另外需要注意的是，我摆脱了循环。

更新2

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

Object.prototype.create = function(args){
    var retobj = Object.create(this);

    retobj.constructor(args || null);

    return retobj;
}

Object.prototype.extend = function(newobj){
    var oldobj = Object.create(this);

    for(prop in newobj)
        oldobj[prop] = newobj[prop];

    return Object.seal(oldobj);
}

var Checkbox = Object.seal({
    width: 0,
    height: 0,
    state: 0,
    document: null,
    parent: null,
    canvas: null,
    ctx: null,

    /*
     * args:
     * name      default             desc.
     *
     * width     15                  width
     * height    15                  height
     * document  window.document     explicit document reference
     * target    this.document.body  target element to insert checkbox into
     */
    constructor: function(args){
        if(args === null)
            args = {};

        this.width = args.width || 15;
        this.height = args.height || 15;
        this.document = args.document || window.document;
        this.parent = args.target || this.document.body;
        this.canvas = this.document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.addEventListener("click", this.ev_click(this), false);
        this.parent.appendChild(this.canvas);
        this.draw();
    },

    ev_click: function(self){
        return function(unused){
            self.state = !self.state;
            self.draw();
        }
    },

    draw_rect: function(color, offsetx, offsety){
        this.ctx.fillStyle = color;
        this.ctx.fillRect(offsetx, offsety,
                this.width - offsetx * 2, this.height - offsety * 2);
    },

    draw: function(){
        this.draw_rect("#CCCCCC", 0, 0);
        this.draw_rect("#FFFFFF", 1, 1);
        this.draw_state();
    },

    draw_state: function(){
        if(this.is_checked())
            this.draw_rect("#000000", 2, 2);
    },

    is_checked: function(){
        return this.state == 1;
    }
});

var Checkbox3 = Checkbox.extend({
    ev_click: function(self){
        return function(unused){
            self.state = (self.state + 1) % 3;
            self.draw();
        }
    },

    draw_state: function(){
        if(this.is_checked())
            this.draw_rect("#000000", 2, 2);

        if(this.is_partial())
            this.draw_rect("#000000", 2, (this.height - 2) / 2);
    },

    is_partial: function(){
        return this.state == 2;
    }
});

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

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

旧的，设计不佳的代码

Working Demo

首先，设置画布

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'));

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

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

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

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

由于javascript中的奇怪事件处理模型，这是IE中可能存在问题的地方。

---

我希望这有助于某人，这绝对符合我的需要。

Answer 15

是否需要JavaScript，没有外部库以及可访问性要求？

迟到聚会，但是在某种程度上，这在2019年仍然很困难，所以我添加了三个解决方案，它们应该对您有所帮助，免费JavaScript ，免费外部库* ，和可访问 ...

我添加了单选按钮，因为很多时候您需要一个就需要另一个。

如果您想即插即用，只需复制样式表，然后根据需要编辑CSS中的颜色代码即可。

小提琴：

• Checkboxes-纯CSS-免费来自第三方库
• Radio buttons-纯CSS-免费来自第三方库
• Checkboxes*使用FontAwesome，但可以轻松地与Glyphicons等交换

我一直在滚动浏览，这些答案中有无数只是简单地以多种方式将可访问性排除在外，violate WCAG。

我需要一个不违反WCAG，不依赖JavaScript或外部库，不破坏制表符或空格键进行选择的解决方案，该解决方案允许焦点事件，该解决方案允许同时选中已禁用的复选框并取消选中，最后是一个解决方案，可以根据需要使用不同的background-color，border-radius等自定义复选框的外观。

Here is a fiddle of my checkbox solution，在这里我使用了@JanTuroň的this answer的某种组合，提出了自己的解决方案，似乎效果很好。如果您已经在使用FontAwesome或Glyphicons或其他图标库，请选中this fiddle out，我也done a radio button fiddle使用了复选框中的许多相同代码，以便也可以使用单选按钮。

我为那些非CSS'y人士添加了很多评论。我仍在学习可访问性，因此，如果我错过了什么，请发表评论，我将尝试纠正它：

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

/* Text color for the label */
input[type="checkbox"]+span {
  cursor: pointer;
  font: 16px sans-serif;
  color: black;
}

/* Checkbox un-checked style */
input[type="checkbox"]+span:before {
  content: '';
  border: 1px solid grey;
  border-radius: 3px;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 0.5em;
  margin-top: 0.5em;
  vertical-align: -2px;
}

/* Checked checkbox style (in this case the background is red) */
input[type="checkbox"]:checked+span:before {
  /* NOTE: Replace the url with a path to an SVG of a checkmark to get a checkmark icon */
  background-image: url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-checkmark.svg');
  background-repeat: no-repeat;
  background-position: center;
  /* The size of the checkmark icon, you may/may not need this */
  background-size: 25px;
  border-radius: 2px;
  background-color: #e7ffba;
  color: white;
}

/* Adding a dotted border around the active tabbed-into checkbox */
input[type="checkbox"]:focus+span:before,
input[type="checkbox"]:not(:disabled)+span:hover:before {
  /* Visible in the full-color space */
  box-shadow: 0px 0px 0px 2px rgba(0, 150, 255, 1);

  /* Visible in Windows high-contrast themes
     box-shadow will be hidden in these modes and
     transparency will not be hidden in high-contrast
     thus box-shadow will not show but the outline will
     providing accessibility */
  outline-color: transparent; /*switch to transparent*/
  outline-width: 2px;
  outline-style: dotted;
  }


/* Disabled checkbox styles */
input[type="checkbox"]:disabled+span {
  cursor: default;
  color: black;
  opacity: 0.5;
}

/* Styles specific to this fiddle that you do not need */
body {
  padding: 1em;
}
h1 {
  font-size: 18px;
}

<h1>
  NOTE: Replace the url for the background-image in CSS with a path to an SVG in your solution or CDN. This one was found from a quick google search for a checkmark icon cdn
</h1>

<label>
  <input type="checkbox">
  <span>Try using tab and space</span>
</label>

<br>

<label>
  <input type="checkbox" checked disabled>
  <span>Disabled Checked Checkbox</span>
</label>

<br>

<label>
  <input type="checkbox" disabled>
  <span>Disabled Checkbox</span>
</label>
<br>

<label>
  <input type="checkbox">
  <span>Normal Checkbox</span>
</label>

<br>

<label>
  <input type="checkbox">
  <span>Another Normal Checkbox</span>
</label>

Answer 16

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

HTML

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

CSS

checkbox {
  display: none;
}

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

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

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

Answer 17

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

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 1px solid gray;
  outline: none;
  vertical-align: middle;
}

input[type=checkbox]:checked {
  background-color: blue;
}

Answer 18

一个简单轻量的模板：

function addOverlay(vertex,graph) {
    var imgo = new mxImage("images/collapsed.gif",11,11);
    var overlay = new mxCellOverlay(imgo,"",
            mxConstants.ALIGN_RIGHT,mxConstants.ALIGN_MIDDLE,
            new mxPoint(1, 1),mxConstants.CURSOR_TERMINAL_HANDLE);
    graph.addCellOverlay(vertex, overlay);

    // Installs a handler for clicks on the overlay
    overlay.addListener( mxEvent.CLICK, function(sender, evt2) {
        var cell = evt2.getProperty('cell');
        var state = graph.view.getState(cell);
        graph.connectionHandler.start(state, 1, 1);
        graph.isMouseDown = true;
        graph.isMouseTrigger = true;
        mxEvent.consume(evt2);
   });
}

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

https://jsfiddle.net/rvgccn5b/

Answer 19

  

无需JavaScript或Jquery 。

简单地更改复选框样式。

HTML

<input type="checkbox" id="option" />
<label for="option"> <span></span> Click me </label>

CSS

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

这是JsFiddle链接：https://jsfiddle.net/05y2bge3/

Answer 20

使用纯CSS3修改复选框样式，不需要任何JS和HTML操作。

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

.form input[type="checkbox"]:checked:before {
  content: "\f046";
}

.form input[type="checkbox"] {
  font-size: 22px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

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

<form class="form">
  <input type="checkbox" />
</form>

Answer 21

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

CSS：

.check-box input {
  display: none;
}

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

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

HTML：

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

Answer 22

这是一个仅支持CSS / HTML的版本，根本不需要Jquery或Javascript，简单而干净的HTML以及非常简单和简短的CSS。

这里是JSFiddle

http://jsfiddle.net/v71kn3pr/

这是HTML

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

这是CSS

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

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

此html / css，您还可以捕获标签上的点击，因此即使您单击标签，也会选中并取消选中该复选框。

这种类型的复选框/单选按钮可以与任何形式完美配合，完全没有问题。已经使用php，aspx，javafaces和coldfusion进行了测试。

Answer 23

**Custom checkbox with css**  (WebKit browser solution only Chrome, Safari, Mobile browsers)

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

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

Answer 24

警告：在撰写本文时，以下情况属实，但与此同时，情况也取得了进展。

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

Answer 25

由于像edge和firefox这样的浏览器不支持：before：after on checkbox input tags，这里有一个纯粹的html和css替代方案。当然你应该根据你的要求编辑css。

将html设为复选框，如下所示：

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

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

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

Answer 26

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

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

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

Answer 27

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

此解决方案可能也适用于单选按钮。

以下适用于IE9，FF30.0和Chrome 40.0.2214.91，仅作为基本示例。您仍然可以将它与背景图像和伪元素结合使用。

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

label {
    display: inline-block;
    position: relative; /* needed for checkbox absolute positioning */
    background-color: #eee;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: .375rem;
    font-family: "Courier New";
    font-size: 1rem;
    line-height: 1rem;
}

label > input[type="checkbox"] {
    display: block;
    position: absolute; /* remove it from the flow */
    width: 100%;
    height: 100%;
    margin: -.5rem; /* negative the padding of label to cover the "button" */
    cursor: pointer;
    opacity: 0; /* make it transparent */
    z-index: 666; /* place it on top of everything else */
}

label > input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
}

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

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>Label text
</label>

Answer 28

<块引用>

CSS 代码

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

<块引用>

HTML 代码

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

<块引用>

演示

JSFiddle demo

Answer 29

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

Answer 30

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

我导出了与此comment中链接的以下代码；有关的问题。

编辑：我添加了单选按钮，即maxshuty suggests。

const selector = '.grid-container > .grid-row > .grid-col[data-theme="retro"]';
const main = () => {
  new CheckboxStyler().run(selector);
  new RadioStyler().run(selector);
};

/*
 * This is only used to add the wrapper class and checkmark span to an existing DOM,
 * to make this CSS work.
 */
class AbstractInputStyler {
  constructor(options) {
    this.opts = options;
  }
  run(parentSelector) {
    let wrapperClass = this.opts.wrapperClass;
    let parent = document.querySelector(parentSelector) || document.getElementsByTagName('body')[0];
    let labels = parent.querySelectorAll('label');
    if (labels.length) labels.forEach(label => {
      if (label.querySelector(`input[type="${this.opts._inputType}"]`)) {
        if (!label.classList.contains(wrapperClass)) {
          label.classList.add(wrapperClass);
          label.appendChild(this.__createDefaultNode());
        }
      }
    });
    return this;
  }
  /* @protected */
  __createDefaultNode() {
    let checkmark = document.createElement('span');
    checkmark.className = this.opts._activeClass;
    return checkmark;
  }
}

class CheckboxStyler extends AbstractInputStyler {
  constructor(options) {
    super(Object.assign({
      _inputType: 'checkbox',
      _activeClass: 'checkmark'
    }, CheckboxStyler.defaultOptions, options));
  }
}
CheckboxStyler.defaultOptions = {
  wrapperClass: 'checkbox-wrapper'
};

class RadioStyler extends AbstractInputStyler {
  constructor(options) {
    super(Object.assign({
      _inputType: 'radio',
      _activeClass: 'pip'
    }, RadioStyler.defaultOptions, options));
  }
}
RadioStyler.defaultOptions = {
  wrapperClass: 'radio-wrapper'
};

main();

/* Theming */

:root {
  --background-color: #FFF;
  --font-color: #000;
  --checkbox-default-background: #EEE;
  --checkbox-hover-background: #CCC;
  --checkbox-disabled-background: #AAA;
  --checkbox-selected-background: #1A74BA;
  --checkbox-selected-disabled-background: #6694B7;
  --checkbox-checkmark-color: #FFF;
  --checkbox-checkmark-disabled-color: #DDD;
}

[data-theme="dark"] {
  --background-color: #111;
  --font-color: #EEE;
  --checkbox-default-background: #222;
  --checkbox-hover-background: #444;
  --checkbox-disabled-background: #555;
  --checkbox-selected-background: #2196F3;
  --checkbox-selected-disabled-background: #125487;
  --checkbox-checkmark-color: #EEE;
  --checkbox-checkmark-disabled-color: #999;
}

[data-theme="retro"] {
  --background-color: #FFA;
  --font-color: #000;
  --checkbox-default-background: #EEE;
  --checkbox-hover-background: #FFF;
  --checkbox-disabled-background: #BBB;
  --checkbox-selected-background: #EEE;
  --checkbox-selected-disabled-background: #BBB;
  --checkbox-checkmark-color: #F44;
  --checkbox-checkmark-disabled-color: #D00;
}


/* General styles */

html {
  width: 100%;
  height: 100%;
}

body {
  /*background: var(--background-color); -- For demo, moved to column. */
  /*color:      var(--font-color);       -- For demo, moved to column. */
  background: #777;
  width: calc(100% - 0.5em);
  height: calc(100% - 0.5em);
  padding: 0.25em;
}

h1 {
  font-size: 1.33em !important;
}

h2 {
  font-size: 1.15em !important;
  margin-top: 1em;
}


/* Grid style - using flex */

.grid-container {
  display: flex;
  height: 100%;
  flex-direction: column;
  flex: 1;
}

.grid-row {
  display: flex;
  flex-direction: row;
  flex: 1;
  margin: 0.25em 0;
}

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

.grid-cell {
  width: 100%;
  height: 100%;
}


/* The checkbox wrapper */

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


/* Hide the browser's default checkbox and radio buttons */

.checkbox-wrapper input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.radio-wrapper input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


/* Create a custom checkbox */

.checkbox-wrapper .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1em;
  width: 1em;
  background-color: var(--checkbox-default-background);
  transition: all 0.2s ease-in;
}

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


/* Disabled style */

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

.checkbox-wrapper input[type="checkbox"]:disabled~.checkmark:after,
.radio-wrapper input[type="radio"]:disabled~.pip:after {
  color: var(--checkbox-checkmark-disabled-color);
}

.checkbox-wrapper input[type="checkbox"]:disabled:checked~.checkmark,
.radio-wrapper input[type="radio"]:disabled:checked~.pip {
  background-color: var(--checkbox-selected-disabled-background);
}


/* On mouse-over, add a grey background color */

.checkbox-wrapper:hover input[type="checkbox"]:not(:disabled):not(:checked)~.checkmark,
.radio-wrapper:hover input[type="radio"]:not(:disabled):not(:checked)~.pip {
  background-color: var(--checkbox-hover-background);
}


/* When the checkbox is checked, add a blue background */

.checkbox-wrapper input[type="checkbox"]:checked~.checkmark,
.radio-wrapper input[type="radio"]:checked~.pip {
  background-color: var(--checkbox-selected-background);
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkbox-wrapper .checkmark:after {
  display: none;
  width: 100%;
  position: absolute;
  text-align: center;
  content: "\2713";
  color: var(--checkbox-checkmark-color);
  line-height: 1.1em;
}

.radio-wrapper .pip:after {
  display: none;
  width: 100%;
  position: absolute;
  text-align: center;
  content: "\2022";
  color: var(--checkbox-checkmark-color);
  font-size: 1.5em;
  top: -0.2em;
}


/* Show the checkmark when checked */

.checkbox-wrapper input[type="checkbox"]:checked~.checkmark:after {
  display: block;
  line-height: 1.1em;
}

.radio-wrapper input[type="radio"]:checked~.pip:after {
  display: block;
  line-height: 1.1em;
}

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

Answer 31

这将使虚线边框以及您正在寻找的背景，此外，如果您想在选中时设置特定的背景颜色，只需将其设置在以下示例中适合您的问题的位置:) 此解决方案还设置了自定义复选标记图标等。

对于 html 元素，例如： <input type="checkbox" />

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

Answer 32

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

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

Answer 33

SCSS / SASS实施

更现代的方法

对于使用SCSS（或轻松转换为SASS）的用户，以下内容将有所帮助。有效地，在复选框旁边创建一个元素，这是您要设置样式的元素。单击复选框后，CSS会重新设置姐妹元素的样式（为新的选中样式）。代码如下：

label.checkbox {
  input[type="checkbox"] {
    visibility: hidden;
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    overflow: hidden;

    &:checked + span {
      background: $accent;
    }
  }

  span {
    cursor: pointer;
    height: 15px;
    width: 15px;
    border: 1px solid $accent;
    border-radius: 2px;
    display: inline-block;
    transition: all 0.2s $interpol;
  }
}

<label class="checkbox">
    <input type="checkbox" />
    <span></span>
    Label text
</label>

Answer 34

使用纯CSS，：before和：after没什么用，没有任何变换，您可以关闭默认外观，然后使用内联背景图像对其进行样式设置，如下例所示。可以在Chrome，Firefox，Safari和现在的Edge（Chromium Edge）中使用。

INPUT[type=checkbox]:focus
{
outline:1px solid rgba(0,0,0,0.2);
}

INPUT[type=checkbox]
{
background-color: #DDD;
border-radius: 2px;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
width: 17px;
height: 17px;
cursor:pointer;
position: relative;
top: 5px;
}

INPUT[type=checkbox]:checked
{
background-color:#409fd6;
background:#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}

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

Answer 35

您可以使用iCheck 它是jQuery＆amp;的定制复选框和单选按钮。 Zepto，也许它会帮助你

确保在icheck.js

之前加载jQuery v1.7 +

1. 选择颜色方案，有10种不同的款式可供选择：
   • 黑色 - minimal.css
   • 红色 - red.css
   • Green - green.css
   • 蓝色 - blue.css
   • Aero - aero.css
   • 格雷 - grey.css
   • 橙色 - orange.css
   • 黄色 - 黄色.c
   • 粉红色 - pink.css
   • 紫色 - purple.css
2. 将/ skins / minimal /文件夹和icheck.js文件复制到您的网站。

3. 在HTML中插入之前（替换你的路径和颜色方案）：

红色配色方案示例：

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

1. 在HTML中添加一些复选框和单选按钮：

2. 在HTML中添加JavaScript以启动iCheck插件：

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

3. 对于不同于黑色的方案，请使用此代码（红色示例）：

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

4. 完成

Answer 36

快速修复以在文字前添加图标：

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