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

Question

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

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

但风格并未适用.该复选框仍显示其默认样式.我如何给它指定的样式？

Answer 1

更新:以下答案在CSS3广泛可用之前引用了事物的状态.在现代浏览器(包括Internet Explorer 9及更高版本)中,使用首选样式创建复选框替换更简单,而不使用javascript.

以下是一些有用的链接:

• 使用Just CSS创建自定义表单复选框
• 简单的CSS复选框生成器
• 你可以用复选框黑客做的东西
• 使用CSS3实现自定义复选框和单选按钮
• 如何使用CSS设置复选框的样式

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

老答复

这是一篇关于样式复选框的有用文章.基本上,作者发现它在浏览器与浏览器之间存在巨大差异,并且无论您如何设置样式,许多浏览器始终显示默认复选框.所以真的没有一个简单的方法.

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

编辑添加:这是一个很好的脚本,为你做这个 ; 它隐藏了真正的复选框元素,用样式化的span替换它,并重定向click事件.

Answer 2

有一种方法可以使用CSS来做到这一点.我们可以(ab)使用label相反的元素和样式.需要注意的是,这不适用于IE8及更低版本.

CSS:

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

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,移动浏览器)

参见示例小提琴

$(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风格翻转小提琴

$(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 allow tabbing, which display:none prevents */
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  overflow: hidden;
}
label span {/* <-- Style the artificial checkbox */
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
}
[type=checkbox]:checked + span {/* <-- Style its checked state */
  background: black;
}

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

细化(使用图标)

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

好吧,这就是CSS3的伪元素可以发挥作用的地方.这些content属性允许您注入表示任一状态的unicode图标.或者,你可以使用第三方字体图标源,如字体真棒(但请确保您还设置相关的font-family,例如,以FontAwesome)

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

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

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

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

Answer 5

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

input {
    accent-color: rebeccapurple;
}

<input type="checkbox" />

将您想要的任何 CSS 颜色（例如命名值、十六进制代码等）设置为 的值accent-color，它将被应用。

目前，该功能适用​​于 Chrome (v93+)、Edge (v93+)、Firefox (v92+)、Opera (v79+) 和 Safari (v15.4+)。

注意：Edge、Chrome 和 Opera（可能还有 Safari；我无法测试）目前不支持通过rgba()其中任何一个的 alpha 通道值（RGB 值rgba()仍将“工作”；alpha 通道将被忽略浏览器）。请参阅MDN 浏览器支持以获取更多信息。

Answer 6

我会按照SW4的回答的建议- 隐藏复选框并用自定义范围覆盖它,建议使用此HTML

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

换行标签整齐地允许单击文本而无需"for-id"属性链接.然而,

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

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

cobberboy的回答推荐Font Awesome,它通常比位图好,因为字体是可缩放的矢量.使用上面的HTML,我建议这些CSS规则:

1. 隐藏复选框

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

   z-index因为我的例子使用足够大的复选框皮肤来完全覆盖它,所以我只使用负片.我不建议,left: -999px因为它不能在每个布局中重复使用.Bushan wagh的回答提供了一种防弹方式来隐藏它并说服浏览器使用tabindex,因此它是一个不错的选择.无论如何,两者都只是一个黑客.今天正确的方法是appearance: none,见Joost的回答:

   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的square-o,调整填充以在焦点上提供均匀的虚线轮廓(见下文).

4. 添加复选框选中皮肤

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

   \00f046是Font Awesome的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;
   }
   

演示小提琴

尝试将鼠标悬停在复选框上,然后使用+ tab和shift+ tab移动和space切换.

Answer 7

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

2021无障碍解决方案 - 纯 CSS 复选框和单选按钮，没有外部依赖项

我一直在滚动和滚动，大量的这些答案只是将可访问性排除在外，并以不止一种方式违反了 WCAG。我加入了单选按钮，因为大多数时候当您使用自定义复选框时，您也需要自定义单选按钮。

小提琴：

• 复选框- 纯 CSS - 不受第 3 方库的约束
• 单选按钮- 纯 CSS - 不受第 3 方库的约束
• 使用 FontAwesome 但可以轻松与 Glyphicons 等交换的复选框*

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

这些都是免费的、可访问的和免费的外部库*...

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

如果你有很长的文字或一个小容器中，遇到文字环绕复选框或单选按钮，输入下面然后就转换成的div这样。

更长的解释： 我需要一个不违反 WCAG、不依赖 JavaScript 或外部库、不破坏键盘导航（如 Tabbing 或空格键选择）、允许焦点事件、允许禁用复选框的解决方案已选中和未选中，最后是一个解决方案，我可以在其中自定义复选框的外观，但是我想要不同的background-color's, border-radius,svg背景等。

我使用了@Jan Turo这个答案的一些组合？想出我自己的解决方案，它似乎工作得很好。我已经完成了一个单选按钮小提琴，它使用了许多来自复选框的相同代码，以便使单选按钮也能工作。

我仍在学习可访问性，所以如果我错过了什么，请发表评论，我将尝试更正这里是我的复选框的代码示例：

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

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

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

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

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

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


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

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

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

<p>You can easily change the background color, checkbox symbol, border-radius, etc.</p>

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

<br>

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

<br>

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

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

<br>

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

Answer 9

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

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

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 10

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

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 11

我更喜欢使用图标字体(例如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 12

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

您可以使用appearance: none;关闭复选框的默认样式,然后像在此处所述(示例4)编写自己的样式.

示例小提琴

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

input[type=checkbox]:focus {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input[type=checkbox]:checked {
  background-color: green;
  text-align: center;
  line-height: 15px;
}

<input type="checkbox">

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

"我可以用吗？" 链接

Answer 13

您可以简单地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 14

我的解决方案

input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background: lightgray;
  height: 16px;
  width: 16px;
  border: 1px solid white;
}

input[type="checkbox"]:checked {
  background: #2aa1c0;
}

input[type="checkbox"]:hover {
  filter: brightness(90%);
}

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

input[type="checkbox"]:after {
  content: '';
  position: relative;
  left: 40%;
  top: 20%;
  width: 15%;
  height: 40%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

input[type="checkbox"]:checked:after {
  display: block;
}

input[type="checkbox"]:disabled:after {
  border-color: #7b7b7b;
}

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

Answer 15

使用纯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 16

这是一个简单的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 17

从我的谷歌搜索来看，这是复选框样式的最简单方法。只需根据您的设计添加:after和:checked:afterCSS。

body{
  background: #DDD;
}
span{
  margin-left: 30px;
}
input[type=checkbox] {
    cursor: pointer;
    font-size: 17px;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.5);
}

input[type=checkbox]:after {
    content: " ";
    background-color: #fff;
    display: inline-block;
    color: #00BFF0;
    width: 14px;
    height: 19px;
    visibility: visible;
    border: 1px solid #FFF;
    padding: 0 3px;
    margin: 2px 0;
    border-radius: 8px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16);
}

input[type=checkbox]:checked:after {
    content: "\2714";
    display: unset;
    font-weight: bold;
}

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

Answer 18

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

HTML

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

CSS

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

的checkbox，即使它是隐藏的，仍然可以访问，并在提交表单时，它的价值将被发送。对于旧的浏览器，您可能需要类的改变label来使用JavaScript，因为我不认为Internet Explorer中的旧版本了解检查::checked的checkbox。

Answer 19

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

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

我使用了 HTML5canvas元素。

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

缺点是如果浏览器由于某种原因无法正确呈现它，那么就没有后备。尽管这在 2017 年是否仍然是一个问题是有争议的。

更新

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

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

    retobj.constructor(args || null);

    return retobj;
}

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

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

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

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

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

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

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

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

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

这是一个工作演示。

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

var my_checkbox = Checkbox.create();

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

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

同样重要的是我摆脱了循环。

更新 2

我在上次更新中忽略的一点是，使用画布比仅仅制作一个看起来像你想要的样子的复选框有更多的优势。如果需要，您还可以创建多状态复选框。

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

    retobj.constructor(args || null);

    return retobj;
}

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

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

    return Object.seal(oldobj);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

旧的、设计糟糕的代码

工作演示

一、设置画布

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    checked = 0; // The state of the 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;
}

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

我希望这可以帮助别人; 它绝对适合我的需求。

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

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>