checkbox默認樣式換成指定圖標

HTML:
<div class="check-ipt">
    <input id="squaredOne1" type="checkbox" name="check" class="none">
    <label class="fl" for="squaredOne1"></label>選擇1
</div>

CSS:(圖形是雪碧圖)

.check-ipt input[type=checkbox]+label {
    margin: 8px 5px -2px 0;
    background: url(../images/textChecked.png) 0 -26px no-repeat;
    cursor: pointer;
    padding-left: 23px;
    height: 16px;
    color: #333333;
}
.check-ipt input[type=checkbox]:checked+label {
    background: url(../images/textChecked.png) 0 0 no-repeat;
    color: #298EF8;
}
.check-ipt input[type=checkbox]:checked+label:hover {
    background: url(../images/textChecked.png) 0 0 no-repeat;
}
.check-ipt input[type=checkbox]+label:hover {
    background: url(../images/textChecked.png) 0 -52px no-repeat;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章