說明

使用偽類來對複選框進行樣式修改。以下以最簡單的一個樣式修改為例項進行說明。

步驟介紹：

1. 將一個label與複選框進行繫結，將兩者放在同一個div下
2. 調整 label的外部樣式使其作為複選框的外形
3. 調整 label::after，使其作為複選框的對勾樣式
4. 繫結複選框的checked樣式和 label::after ，使複選框被選擇之後即可改變 label::after 樣式
5. 隱藏複選框

編碼以及說明

css

.checkbox{
    /*預先設定大div的樣式*/
    width: 50px;
    margin: 20px 100px;
    position: relative;
}
.checkbox label{
    /*
    cursor屬性設定滑鼠的樣式
    其他屬性設定複選框外形
    */
    cursor: pointer;
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0;
    left: 0;
    background: #eee;
    border:1px solid #ddd;
}
.checkbox label:after{
    /*
    設定複選框對勾的樣式，被選擇之前的樣式
    1. 設定長寬
    2. 透明背景，設定成對勾
    3. 旋轉45度，併兼容各瀏覽器
    */
    opacity: 0.2;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    
    border: 3px solid #333;
    border-top: none;
    border-right: none;

    -webkit-transform: rotate(-45deg);  /* Safari 和 Chrome */
    -moz-transform: rotate(-45deg);  /* Firefox */
    -o-transform: rotate(-45deg);  /* Opera */
    -ms-transform: rotate(-45deg);  /*IE9*/
    transform: rotate(-45deg);
}
.checkbox label:hover::after{
    /*  滑鼠移動到label之後的樣式改變  */
    opacity: 0.5;
}
.checkbox input[type="checkbox"]:checked + label:after{
    /*  繫結複選框的checked和 label::after */
    opacity: 1;
}
input[type=checkbox] {
    /*  隱藏複選框  */
    visibility: hidden;
}
 

html

<div class="checkbox">
    <input type="checkbox" value="1" id="checkboxInput" name="" />
    <label for="checkboxInput"></label>
</div>

參考連結

How To Style A Checkbox With CSS