使用背景圖修改radio、checkbox樣式


如果覺得使用CSS偽類設置樣式太麻煩,或者頁面上選中的樣式太復雜CSS無法模擬,也可以用背景圖去替換樣式
<div class="">
<label><input type="radio" name="1"><i class="spot"></i>123456</label>
<label><input type="radio" name="1"><i class="spot"></i>123456</label>
</div>
<style>
label{
display:inline-block;
width:200px;
height:50px;
line-height:.8rem;
text-align:left;
position: relative;
}
label input{
width: 15px;
height: 15px;
vertical-align: bottom;
margin-right:.1rem;
opacity: 0;
}
.spot{
display:inline-block;
width:17px;
height:17px;
background:url("image/radio.png") no-repeat; /*默認的樣式圖片*/
background-size:16px;
position: absolute;
top:.2rem;
left:0;
z-index:5;
}
input:checked + .spot{
background:url("image/checked.png") no-repeat; /*選中后的樣式圖片*/
background-size:16px;
}
</style>
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM