最优解：直接用这个

原理：首先-webkit-appearance: none把input元素样式清除掉，然后手动设样式，用到了 content: '\2713';设置勾勾特殊字符。

效果预览：

 

html代码：没啥特别的

<input type="checkbox">

CSS代码

input[type='checkbox'] {   
    min-width: 12px;
    height: 12px;
    background-color: #fff;
    /*清除默认样式*/   
    -webkit-appearance: none;   
    border: 1px solid #c9c9c9;   
    box-sizing: border-box;   
    border-radius: 2px;   
    outline: none; 
} 
input[type='checkbox']:checked:before {   
    content: '\2713';   
    position: relative;   
    top: -5px;   
    display: inline-block;   
    min-width: 12px;   
    height: 12px;   
    line-height: 12px;   
    text-align: center;   
    color: #fff;   
    font-weight: bold;   
    background: #008aff;   
    border-radius: 2px; 
}

 

思路2：用label标签来将input复选框给遮盖住

在网页设计中由于无法设置input框的样式很多时候会使用图片代替，今天在《css揭秘》一书中看到关于input样式框的修改，感觉很有启发，所以提供给广大开发者，希望有所帮助。

具体思路：使用一个label标签来将input复选框给遮盖住，同时使用input的checked属性实现样式变换。

input原本样式

修改后的样式

css代码

body {　　background:#a8bfcf;}.cricle {　　margin-top: 20px;}input+.las:before {　　display: inline-block;　　margin-right: 5px;　　content: "\a0"; /*不换行空格*/　　width: 1em;　　height: 1em;　　background:linear-gradient(#2467b5,#5e90d7);　　border-radius: .25em;　　border:.125em solid white;　　text-indent: .08em;　　line-height: 1em;　　box-shadow: .08em .08em .08em rgba(0,0,0,.4),.08em .1em .08em rgba(0,0,0,.4) inset;　　font-size: 24px;　　vertical-align: middle;　　outline-offset: -10px;}input:checked+.las:before{　　content:"\2713";　　background:linear-gradient(#2467b5,#5e90d7);　　color: white;　　font-weight: bold;　　box-shadow: .08em .08em .08em rgba(0,0,0,.4),.08em .1em .08em rgba(0,0,0,.4) inset;}input+.lasC:before{　　border-radius: 50%;}input:checked+.lasC:before{　　content: "·";　　text-indent: 0;　　text-shadow: 2px 0 2px white,0 2px 2px white, 0 -2px 2px white, -2px 0 2px white; /*由于点太小扩大阴影使其变大*/}input {　　position: absolute;　　clip: rect(0,0,0,0);}

 

html代码

<div>　
    <input type="checkbox" id="awesome4" />　
    <label class="las" for="awesome4">Awesome!</label>
    <input type="checkbox" id="awesome5" />　
    <label class="las" for="awesome5">Awesome2!</label>　
    <input type="checkbox" id="awesome6" />　
    <label class="las" for="awesome6">Awesome3!</label>
</div>
<div class="cricle">　
    <input type="checkbox" id="awesome" />　
    <label class="las lasC" for="awesome">Awesome!</label>　
    <input type="checkbox" id="awesome2" />　
    <label class="las lasC" for="awesome2">Awesome2!</label>　
    <input type="checkbox" id="awesome3" />　
    <label class="las lasC" for="awesome3">Awesome3!</label>
</div>