通过使用: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%);

}

$(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";

}

Webkit friendly mobile-style checkbox/flipswitch

复选框，单选框都不好直接用css样式美化，总得用点奇思妙想才行。如果只考虑谷歌内核的浏览器的话，那么用appearance属性可以搞定大部分表单控件的样式。关键是这个appearance属性IE不支持，这就逼得大家另想办法了。

css怎么美化复选框样式

利用label挂钩checkbox的特点来实现。

当html代码中，label的for属性值和checkbox的id值一样的时候，label就可以控制checkbox的选择了。

html代码如下：

为label的伪元素添加背景图片，覆盖真正的checkbox对象，这样，既有图片的美观效果，又有checkbox一切的交互行为。

设计一个图片如下，默认状态，点击状态，不可用状态。(相关课程推荐：css视频教程)

这里使用了定位，不然不能覆盖原始的复选框。而且文字和图片之间要间隔，文字也需要设置为定位对象。总之，这里都是定位关系。

这个效果只兼容IE9以上。

CSS#check {

position: relative;

}

input[type=checkbox]+label {

position: absolute;

width: 60px;

height: 20px;

}

input[type=checkbox]+label:before {

content: "";

position: absolute;

width: 20px;

height: 20px;

background: url(images/btn1.png) no-repeat;

}

input[type=checkbox]+label span {

font-size: 14px;

position: absolute;

left: 30px;

}

input[type=checkbox]:checked+label:before {

background-position: -28px 0;

}

input[type=checkbox] {

position: absolute;

left: 0;

top: 0;

}

本文来自css答疑栏目，欢迎学习！