CSS基本用户界面模块第4级(最终)通过一个叫做重音-颜色的新解决方案增加了对这一点的支持，它实际上非常简单，不像这里的其他答案:

输入{ 强调色: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浏览器支持。

你可以简单地使用appearance:在现代浏览器中没有，这样就没有默认样式，所有的样式都被正确应用:

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

开始之前(截至2015年1月)

最初的问题和答案现在已经有5年的历史了。因此，这是一个小小的更新。

首先，当涉及到样式化复选框时，有许多方法。基本宗旨是:

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

解决方案(原则上)

上面的任务可以通过许多方法来完成——您经常会听到使用CSS3伪元素是正确的方法。实际上，没有真正的正确或错误的方法，它取决于最适合您将在其中使用它的上下文的方法。也就是说，我有一个更喜欢的。

将复选框包装在标签元素中。这意味着即使它被隐藏，您仍然可以通过单击标签内的任何位置来切换其已检查状态。 隐藏你的复选框。 在复选框后添加一个新元素，您将相应地设置它的样式。它必须出现在复选框之后，以便使用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(但要确保你也设置了相关的字体家族，例如FontAwesome)

标签输入{ 显示:没有;/*隐藏默认复选框*/ ｝ /*设置人工复选框*/ 标签跨度{ 高度:10 px; 宽度:10 px; 边框:1px纯灰色; 显示:inline-block; 位置:相对; ｝ /*样式它的checked状态…带有标记图标*/ [type=checkbox]:已检查+ span:before { 内容:“2714 \”; 位置:绝对的; 上图:5 px; 左:0; ｝ <标识> <输入类型=“复选框”> < span > < / span > 复选框标签文本 < / >标签

自定义复选框与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;
    }

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

呵!所有这些变通方法让我得出结论，如果你想要设置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

在上次更新中我忽略了一点，那就是使用canvas比仅仅创建一个你想要的复选框有更多的优势。如果您愿意，还可以创建多状态复选框。

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

我稍微修改了上一个代码片段中使用的复选框，使其更通用，从而可以使用具有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中奇怪的事件处理模型。

---

我希望这能帮助到一些人;它绝对符合我的需要。