input type="checkbox" 選擇框重寫樣式

html:

<div class="lists-checkbox">
     <input type="checkbox">
     <label style="position: relative;top: 6px"></label>
</div>

css:

.lists-checkbox label{
    border:none;
    background:url(/static/xiaoxiao/img/disselected.png) no-repeat left;
    width: 14px;
    height: 14px;
    position: relative;
    top: 8px;
}
.lists-checkbox input[type=checkbox]{
    display: none;
}
.lists-checkbox input[type=checkbox]:checked + label{
    background:url(/static/xiaoxiao/img/selected.png) no-repeat left;
    width: 14px;
    height: 14px;
    position: relative;
    top: 8px;
}

圖列:

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章