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

2024-10-14 20:13:52

1、第一，我们先来看下这2张图我们发现，他们所有的checkbox都不是系统自带的

2、第二，当然，不能说不是系统自带的就不是，我们来看下现在系统下的checkbox是什么样子的（有图有真相）看看，是不是不一样～

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>我们来看下效果：

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;内容块离左边的距离，这样让内容可以不覆盖checkbox2、margin-top:-4px;内容块与checkbox垂直不对齐，微调垂直对齐位置

10、正文代码：<body><button.check-bo垓矗梅吒xtype="checkbox"><div .checkbox-text>A4杂志册</div></button><button.check-boxtype="checkbox"><div .checkbox-text>水晶册</div></button><button.check-boxtype="checkbox"><div .checkbox-text>桌面摆台</div></button></body>现在再来看看效果：这个就是我们要的效果，自定义的

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