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

Question

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

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

但该样式并未应用。该复选框仍显示其默认样式。如何赋予它指定的样式？

Answer 1

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

您可以避免添加额外的标记。通过设置 CSS appearance，这可以在除 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 3

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

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

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

示例 JSFiddle

“我可以使用吗？”链接

Answer 4

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

我的解决方案

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

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

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

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

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

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

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

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

Answer 6

您可以在现代浏览器上简单地使用 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 7

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

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

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

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

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

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

Answer 9

使用纯 CSS 修改复选框样式。这不需要任何 JavaScript 或 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 10

哎呀！所有这些解决方法让我得出这样的结论：如果你想设计 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;
    }
});

这是一个工作演示。

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

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 11

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 12

还有一个简单且轻量级的模板：

input[type=checkbox] {
  cursor: pointer;
}

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

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

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

https://jsfiddle.net/rvgccn5b/

Answer 13

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

HTML

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

CSS

checkbox {
  display: none;
}

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

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

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

Answer 14

不需要 JavaScript 或 jQuery。

简单地更改您的复选框样式。

input[type="checkbox"] {
  display: none;
  border: none !important;
  box-shadow: none !important;
}

input[type="checkbox"] + label span {
  background: url("https://i.ibb.co/mG7QRYw/62a9b364a056b98f7e02705a-checkboxunselected.png");
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  background-size: 100%;
}

input[type="checkbox"]:checked + label span {
  background: url(https://svgur.com/i/upi.svg);
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-size: 100%;
}

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

这是一个 JSFiddle 链接

Answer 15

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

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

以下适用于 Internet Explorer 9、Firefox 30.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> </span>Label text
</label>

Answer 16

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

.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 17

使用 CSS 自定义复选框（WebKit 浏览器解决方案仅限 Chrome、Safari、移动浏览器）

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

CSS：

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

Answer 18

通过将 Materialize 与自定义样式表结合使用，您可以实现如下效果：

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

< strong>HTML 代码

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

演示

JSFiddle 演示

Answer 19

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

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

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

Answer 20

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

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 21

更新：

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

以下是一些有用的链接：

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

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

---

旧答案

这是一篇关于样式复选框的有用文章。基本上，该作者发现它在不同浏览器之间存在巨大差异，并且无论您如何设计它，许多浏览器总是显示默认复选框。所以确实没有一个简单的方法。

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

编辑添加：这里是 一个很好的脚本，可以为您完成此操作；它隐藏真正的复选框元素，将其替换为样式化的跨度，并重定向单击事件。

Answer 22

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

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

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

参见小提琴示例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

额外的 Webkit 风格翻转小提琴

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

body {
  font-family: arial;
}

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

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

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

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

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

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

Answer 23

开始之前（截至 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 Awesome（但请确保您还设置了相关的 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 24

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

.myCheckbox input {
  position: relative;
  z-index: -9999;
}

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

.myCheckbox input:checked + span {
  background: url("link_to_another_image");
}

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

Answer 25

现代可访问解决方案 - 使用accent-color

使用新的accent-color 属性，并确保满足适当的 对比度为 3:1，以确保可访问性。这也适用于radio按钮。

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

<input class="red-input" type="checkbox" />

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

---

旧答案，如果您需要比上述提供更多的自定义功能，我只推荐这个：

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

Fiddles：

• 复选框 - 纯CSS - 来自第3方库
• 单选按钮 - 纯CSS - 不含第三方库
• 复选框* 使用 FontAwesome 但可以与 Glyphicons 等交换。很容易

迟到，但不知怎的，这在 2019 中仍然很困难，< s>2020、2021，所以我添加了三个可访问且易于的解决方案。

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

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

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

更长的解释：
我需要一个不违反 WCAG、不依赖 JavaScript 或外部库、不会破坏键盘导航（如 Tab 键或空格键选择）、允许焦点事件、允许禁用同时选中的复选框的解决方案并未经选中，最后是一个解决方案，我可以根据需要使用不同的 background-color's、border-radius、svg< 自定义复选框的外观/code> 背景等。

我使用了 @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 26

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

请参阅此链接了解更多信息

CODEPEN

步骤

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

这是我的做法。

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

input[type="checkbox"]:focus + label::before {
    outline: rgb(59, 153, 252) auto 5px;
}

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

使用 :before 和 :after 更加时尚

body{
  font-family: sans-serif;  
}

.container {
    margin-top: 50px;
    margin-left: 20px;
    margin-right: 20px;
}
.checkbox {
    width: 100%;
    margin: 15px auto;
    position: relative;
    display: block;
}

.checkbox input[type="checkbox"] {
    width: auto;
    opacity: 0.00000001;
    position: absolute;
    left: 0;
    margin-left: -20px;
}
.checkbox label {
    position: relative;
}
.checkbox label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
    width: 22px;
    height: 22px;
    transition: transform 0.28s ease;
    border-radius: 3px;
    border: 2px solid #7bbe72;
}
.checkbox label:after {
  content: '';
    display: block;
    width: 10px;
    height: 5px;
    border-bottom: 2px solid #7bbe72;
    border-left: 2px solid #7bbe72;
    -webkit-transform: rotate(-45deg) scale(0);
    transform: rotate(-45deg) scale(0);
    transition: transform ease 0.25s;
    will-change: transform;
    position: absolute;
    top: 12px;
    left: 10px;
}
.checkbox input[type="checkbox"]:checked ~ label::before {
    color: #7bbe72;
}

.checkbox input[type="checkbox"]:checked ~ label::after {
    -webkit-transform: rotate(-45deg) scale(1);
    transform: rotate(-45deg) scale(1);
}

.checkbox label {
    min-height: 34px;
    display: block;
    padding-left: 40px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
    vertical-align: sub;
}
.checkbox label span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.checkbox input[type="checkbox"]:focus + label::before {
    outline: 0;
}

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

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

Answer 27

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

---

首先，隐藏复选框并用自定义跨度覆盖它，建议使用以下 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"] {
      位置：绝对；
      不透明度：0；
      z 索引：-1；
    }
   

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

    input[type="checkbox"] {
      外观：无；
      -webkit-外观：无；
      -moz-外观：无；
    }
   

2. 样式复选框标签

    input[type="checkbox"] + span {
      字体：16pt 无衬线；
      颜色：#000；
    }
   

3. 添加复选框外观

    input[type="checkbox"] + span:before {
      字体：16pt FontAwesome；
      内容：'\00f096'；
      显示：内联块；
      宽度：16pt；
      内边距：2px 0 0 3px；
      右边距：0.5em；
    }
   

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

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

    input[type="checkbox"]:checked + span:before {
      内容：'\00f046'；
    }
   

\00f046是Font Awesome的check-square-o，与square-o<宽度不一样/code>，这就是上面宽度样式的原因。

5. 添加焦点轮廓

    input[type="checkbox"]:focus + span:before {
      轮廓：1px 点线#aaa；
    }
   

   Safari 不提供此功能（请参阅@Jason Sankey 的评论），请参阅此答案了解仅限 Safari 的 CSS

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

    input[type="checkbox"]:disabled + span {
      颜色：#999；
    }
   

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

    input[type="checkbox"]:not(:disabled) + span:hover:before {
      文本阴影：0 1px 2px #77F；
    }
   

---

在JS Fiddle上测试它

尝试将鼠标悬停在复选框上，然后使用 Tab 和 Shift+Tab 进行移动，使用 Space 进行切换。

Answer 28

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

input {
    accent-color: rebeccapurple;
}

<input type="checkbox" />

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

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

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

Answer 29

使用纯 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 & Conditions</label>
</form>

Answer 30

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

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

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

Simple 将流动的 CSS 放在页面顶部，所有复选框样式将像这样更改：

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

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

input[type=checkbox]:after,
input[type=checkbox]::after {
  content: " ";
  background-color: #fff;
  display: inline-block;
  margin-left: 10px;
  padding-bottom: 5px;
  color: #00BFF0;
  width: 22px;
  height: 25px;
  visibility: visible;
  border: 1px solid #00BFF0;
  padding-left: 3px;
  border-radius: 5px;
}

input[type=checkbox]:checked:after,
input[type=checkbox]:checked::after {
  content: "\2714";
  padding: -5px;
  font-weight: bold;
}

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