htmlayout设计ui 基础篇：[18]自定义checkbox

第四，下面，对定义我们想要的样子我们来看下效果：

问题出来了：1、checkbox显示的样子不同2、A4杂志册中的文字把checkbox给覆盖掉了怎么解决呢？

第五，来看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;就可以了样式改成：

现在的样式：.check-box {size:12px;margin:4px;padding:0;border:#707070 1px solid;background:#fff;vertical-align:middle;}看到了吗，checkbox已经显示正常了～

第六，接下来，来解决文字把checkbox给覆盖掉的问题我们来看下，A4杂志册，这个本来就是一体的文字肯定是在这个垂直左对齐了～来分析下：1、改内容块button中的padding改变包含内容的跨离是不可以的（上面说了，padding是用来控制checkbox的显示样子的）2、那就只有修改"A4杂志册",把这个内容放到一个“块”级里，然后，对这个“块”控制就可以了，这样就不影响的显示效果，也可以解决内容把checkbox覆盖的问题了

第七，代码如下：样式代码：代码说明：1、padding-left:20px;内容块离左边的距离，这样让内容可以不覆盖checkbox2、margin-top:-4px;内容块与checkbox垂直不对齐，微调垂直对齐位置

正文代码：

第八，我这里对于checkbox的自定义样式只写了.check-box 和 .check-box:checked两种状态实际上总共有8种状态：.check-box 和 .check-box:checked各有下面四种状态normal，hover，pressed，disabled这个你可以自己写下～