CSS 美化複選框 - 無圖片方式

標籤：

今天和大家分享一個不使用圖片美化複選框的方式。來看下吧，如下是3種不同狀態下的效果：

 

一. Html結構

<div class="check-wrap">     <input type="checkbox" class="icheck" id="icheck" />     <label for="icheck" class="ilabel"></label></div>

註： label 標籤的 for 屬性值必須指定為 input 的 id 名稱。

 

二. CSS 代碼

.check-wrap{     position: relative;     height: 24px;     width: 24px;}.icheck{     opacity: 0;}.ilabel{             border-radius: 3px;         cursor: pointer;     display: block;     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;}.ilabel:after{     content: " ";     border: 2px solid #DDD;             display: block;     font-weight: bold;     text-align: center;     border-radius: 3px;     width: 20px;     height: 20px; } .icheck:checked + .ilabel:after{     content: "?";     border-color: #3f51b5;     background-color: #3f51b5;     color: #fff;  }  .icheck:indeterminate + .ilabel:after{     content: "■";     color: #3f51b5;     background-color: #FFF;     border-color: #3f51b5;  }

 

1. 將原有的 input 標籤透明度設為0

2. label:after 的寬高設定 20px 是因為 border 佔據了4px

3. checkbox 的 indeterminate 狀態大家用的可能比較少（中的第2個狀態），只能通過 js 進行設定，這種情況通常用在樹型結構（即：子節點有選中但並未全部選中的時候父節點的狀態）

<script>     var icheck = document.getElementById("icheck");     icheck.indeterminate = true;</script>

 

代碼量真的挺少的，不明白的話請留言，謝謝.... :)

 

CSS 美化複選框 - 無圖片方式