1、第一，我们先来看下这2张图
我们发现，他们所有的checkbox都不是系统自带的
![htmlayout设计ui 基础篇：[18]自定义checkbox](https://exp-picture.cdn.bcebos.com/b7b28f87031c99c084ca1f35af2fa872951fed89.jpg)
![htmlayout设计ui 基础篇：[18]自定义checkbox](https://exp-picture.cdn.bcebos.com/9881b1fce186242f86446aac35e434daf15ee889.jpg)
2、第二，当然，不能说不是系统自带的就不是，我们来看下现在系统下的checkbox是什么样子的（有图有真相）
看看，是不是不一样～
![htmlayout设计ui 基础篇：[18]自定义checkbox](https://exp-picture.cdn.bcebos.com/e0c73a2fa872941f8ed2ca697b5e4a237871e689.jpg)
3、第三，我们来讲下，如何自定义成我们想要的效果吧～
1、先来看下，默认状态吧
<body>
<button type="checkbox">A4杂志册</button>
<button type="checkbox">水晶册</button>
<button type="checkbox">桌面摆台</div></button>
</body>
这个效果，是我们直接加上<button type="checkbox"></button>默认checkbox的显示状态
![htmlayout设计ui 基础篇：[18]自定义checkbox](https://exp-picture.cdn.bcebos.com/256eb672941fbee405ec0eedc1237971ff1de789.jpg)
4、第四，下面，对<button type="checkbox"></button>定义我们想要的样子
<style>
.check-box {
size:12px;
margin:4px;
border:#707070 1px solid;
background:#fff;
vertical-align:middle;
}
.check-box:checked {
foreground:url(stock:checkmark) no-repeat 50% 50%;
}
</style>
我们来看下效果：
![htmlayout设计ui 基础篇：[18]自定义checkbox](https://exp-picture.cdn.bcebos.com/955ea0e434daf05e791587c2751d96d81919e589.jpg)
5、问题出来了：
1、checkbox显示的样子不同
2、<button .check-box type="checkbox">A4杂志册</button>中的文字把checkbox给覆盖掉了
怎么解决呢？
6、第五，来看1、checkbox显示的样子不对
原来的样式：
.check-box {
size:12px;
margin:4px;
border:#707070 1px solid;
background:#fff;
vertical-align:middle;
}
我们看到样子中
1、尺寸size:12px;定义了
2、border:#707070 1px solid;边线颜色定义了
3、background:#fff;背景颜色定义了
还差最重要的一个，padding没有定义好，这个一般都是默认的尺寸
直接定义成padding:0;就可以了
样式改成：
7、现在的样式：
.check-box {
size:12px;
margin:4px;
padding:0;
border:#707070 1px solid;
background:#fff;
vertical-align:middle;
}
看到了吗，checkbox已经显示正常了～
![htmlayout设计ui 基础篇：[18]自定义checkbox](https://exp-picture.cdn.bcebos.com/4b626771fe1d96d82f2f9f932ccd0c6efaf2e189.jpg)
8、第六，接下来，来解决文字把checkbox给覆盖掉的问题
我们来看下，<button .check-box type="checkbox">A4杂志册</button>，这个本来就是一体的文字肯定是在<button>这个垂直左对齐了～
来分析下：
1、改内容块button中的padding改变包含内容的跨离是不可以的（上面说了，padding是用来控制checkbox的显示样子的）
2、那就只有修改"A4杂志册",把这个内容放到一个“块”级里，然后，对这个“块”控制就可以了，这样就不影响<button></button>的显示效果，也可以解决内容把checkbox覆盖的问题了
9、第七，代码如下：
样式代码：
<style>
button > .checkbox-text {
padding-left:20px;
margin-top:-4px;
}
</style>
代码说明：
1、padding-left:20px;内容块离左边的距离，这样让内容可以不覆盖checkbox
2、margin-top:-4px;内容块与checkbox垂直不对齐，微调垂直对齐位置
10、正文代码：
<body>
<button .check-box type="checkbox"><div .checkbox-text>A4杂志册</div></button>
<button .check-box type="checkbox"><div .checkbox-text>水晶册</div></button>
<button .check-box type="checkbox"><div .checkbox-text>桌面摆台</div></button>
</body>
现在再来看看效果：
这个就是我们要的效果，自定义的
![htmlayout设计ui 基础篇：[18]自定义checkbox](https://exp-picture.cdn.bcebos.com/19587f20a7cd0c6ec0c4fc00fed7997bbaf4dd89.jpg)
11、第八，我这里对于checkbox的自定义样式只写了.check-box 和 .check-box:checked两种状态实际上总共有8种状态：
.check-box 和 .check-box:checked各有下面四种状态
normal，hover，pressed，disabled
这个你可以自己写下～
