今天和大家分享一個不使用圖片美化複選框的方式。來看下效果圖吧,如下是3種不同狀態下的效果:
一. Html結構
<span style="color: #0000ff;"><</span><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><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><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>
註: 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</span> icheck = document.getElementById("icheck"<span style="color: #000000;">); icheck.indeterminate </span>= <span style="color: #0000ff;">true</span><span style="color: #000000;">; </span></script>
代碼量真的挺少的,不懂的話請留言,謝謝.... :)