今天和大家分享一个不使用图片美化复选框的方式。来看下效果图吧,如下是3种不同状态下的效果:
一. Html结构
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="check-wrap"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="icheck"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="icheck"</span> <span style="color: #0000ff;">/></span> <span style="color: #0000ff;"><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="icheck"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="ilabel"</span><span style="color: #0000ff;">></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>
注: label 标签的 for 属性值必须指定为 input 的 id 名称。
二. CSS 代码
<span style="color: #800000;">.check-wrap</span>{<span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 24px</span>; }<span style="color: #800000;"> .icheck</span>{<span style="color: #ff0000;"> opacity</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;"> .ilabel</span>{<span style="color: #ff0000;"> border-radius</span>:<span style="color: #0000ff;"> 3px</span>;<span style="color: #ff0000;"> cursor</span>:<span style="color: #0000ff;"> pointer</span>;<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;"> top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 100%</span>; }<span style="color: #800000;"> .ilabel:after</span>{<span style="color: #ff0000;"> content</span>:<span style="color: #0000ff;"> " "</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 2px solid #DDD</span>;<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;"> font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;"> text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;"> border-radius</span>:<span style="color: #0000ff;"> 3px</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 20px</span>; }<span style="color: #800000;"> .icheck:checked + .ilabel:after</span>{<span style="color: #ff0000;"> content</span>:<span style="color: #0000ff;"> "✓"</span>;<span style="color: #ff0000;"> border-color</span>:<span style="color: #0000ff;"> #3f51b5</span>;<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #3f51b5</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #fff</span>; }<span style="color: #800000;"> .icheck:indeterminate + .ilabel:after</span>{<span style="color: #ff0000;"> content</span>:<span style="color: #0000ff;"> "■"</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #3f51b5</span>;<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #FFF</span>;<span style="color: #ff0000;"> border-color</span>:<span style="color: #0000ff;"> #3f51b5</span>; }
1. 将原有的 input 标签透明度设为0
2. label:after 的宽高设置 20px 是因为 border 占据了4px
3. checkbox 的 indeterminate 状态大家用的可能比较少(效果图中的第2个状态),只能通过 js 进行设置,这种情况通常用在树型结构(即:子节点有选中但并未全部选中的时候父节点的状态)
<script> <span style="color: #0000ff;">var icheck = document.getElementById("icheck"<span style="color: #000000;">); icheck.indeterminate = <span style="color: #0000ff;">true<span style="color: #000000;">; </script>
代码量真的挺少的,不明白的话请留言,谢谢.... :)