改變默認的多選框 checkbox 樣式~

 效果圖：

 

HTML代碼：

<label for="Checkbox1" style="display:none;"></label>
<input type="checkbox" id="Checkbox1" value="option1" class="input_check">

 

CSS代碼：

/* 復選框checkbox */
.input_check {
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    display: none;
}
/* 未選 */
.input_check{
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 18px;
    height: 18px;
}
input[type=file]:focus, input[type=checkbox]:focus, input[type=radio]:focus{
    outline: none;    /* outline （輪廓）是繪制於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。outline 屬性設置元素周圍的輪廓線。*/
}
/* 鼠標滑過未選 */
 input[type=file]:hover, input[type=checkbox]:hover, input[type=radio]:hover{
    border-color: #3bb8f6;
} 
/* 已選 */
.input_check:checked {
    display: inline-block;
    background-image: url('../../../assets/img/checkbox2.png');
    background-repeat: no-repeat;  
    background-position: 0px 0px; 
    width: 18px;
    height: 18px;
    border: none;
} 
/* 鼠標滑過已選 */
.input_check:checked:hover{
    display: inline-block;
    background-image: url('../../../assets/img/checkbox1.png');
    background-repeat: no-repeat;  
    background-position: 0px 0px; 
    width: 18px;
    height: 18px;
    border: none;
    outline: none;
}