使用背景图修改radio、checkbox样式

最新推荐文章于 2021-10-20 12:16:02 发布

chuluxie3918

最新推荐文章于 2021-10-20 12:16:02 发布

阅读量570

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/4191619/blog/3100058

版权

本文转载于:猿2048网站使用背景图修改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>