之前都是用雪碧图进行radio选中图片的切换,现在选择这种比较容易的css样式切换。 html代码部分: <div class="choose"> <label class="radio">选项1<input type="radio" name="radio" value="1" checked><i></i></label> <label class="radio">选项2<input type="radio" value="2" name="radio"><i></i></label> </div> css样式:.choose { position: relative; } .choose .radio { position: relative; display: inline-block; font-weight: 400; color: #0c4757; padding-left: 25px; cursor: pointer; } .choose .radio input { position: absolute; left: -9999px; } .choose .radio i { display: block; position: absolute; top: 6px; left: 0; width: 15px; height: 15px; outline: 0; border: 1px solid #e4e4e4; background: #ffffff; border-radius: 50%; transition: border-color .3s; -webkit-transition: border-color .3s; } .choose .radio input + i:after { position: absolute; content: ''; top: 3px; left: 3px; width: 9px; height: 9px; border-radius: 50%; background-color: #ff5d5b; opacity: 0; transition: opacity .1s; -webkit-transition: opacity .1s; } .choose .radio input:checked + i:after { opacity: 1; }
改变radio默认选中颜色
最新推荐文章于 2024-08-23 13:30:11 发布