如果觉得设置样式太麻烦,或者页面上选中的样式太复杂,也可以用背景图去修改样式
<div>
<label><input type="radio"><i></i>123456</label>
<label><input type="radio"><i></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>
使用背景图修改radio、checkbox样式
内容版权声明:除非注明,否则皆为本站原创文章。