今天小编跟大家讲解下有关css 单选按钮图标替换的方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css 单选按钮图标替换的方法 的相关资料，希望小伙伴们看了有所帮助。
一.需求：替换单选按钮默认图标
二.原理：
1.使用label扩大选择热区 隐藏input元素
2.添加一个元素设置其背景图作为默认显示的按钮图标并显示
3.为该元素添加一个伪元素相对于添加的元素绝对定位且默认不显示 在该伪元素中添加默认选中的背景图
4.在input元素选中后 显示该伪元素 因为伪元素是绝对定位层级比较高所以会显示在上面 即选中的图标
三.HTML
<label><input name="price" type="radio" value="1" /><span className="show-radio"></span><p>100-500</p></label>四.CSS
input{ display:none}; .show-radio{ display: inline-block; width:34px; height:35px; background:url('../../imgs/icons.png') no-repeat; background-position:-529px -180px; vertical-align: middle; position: relative;}.show-radio:before{ content:''; display: none; width:34px; height:35px; background:url('../../imgs/icons.png') no-repeat; background-position:-474px -180px; vertical-align: middle; position:absolute; left:0; top:0;}input:checked~show-radio:before{ display:block;}五.效果
近重视实现思路和重要代码 部分省略 望见谅
以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
