不需要JavaScript或jQuery。

简单地改变你的复选框样式。

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; } <input type="checkbox" id="option" /> <label for="option"> <span></span> Click me </label>

这是一个JSFiddle链接

警告:在撰写本文时，以下内容是正确的，但与此同时，事情有了进展。

AFAIK现代浏览器使用本机操作系统控件显示复选框，所以没有办法对它们进行样式化。

呵!所有这些变通方法让我得出结论，如果你想要设置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中奇怪的事件处理模型。

---

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

一个简单而轻量级的模板:

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/

我总是使用伪元素:before和:after来改变复选框和单选按钮的外观。它很有魔力。

更多信息请参考这个链接

CODEPEN

步骤

使用css规则隐藏默认复选框，如可见度:hidden或不透明度:0或位置:absolute;left:-9999px等。 使用:before元素创建一个假复选框，并传递一个空的或不间断的空格'\00a0'; 当复选框处于:checked状态时，传递unicode内容:"\2713"，这是一个复选标记; 添加:焦点样式，使复选框可访问。 完成

我是这样做的。

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

这帮助我更改复选框的样式(颜色)

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

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