css 单选按钮图标替换的方法

一.需求:替换单选按钮默认图标 二.原理: 1.使用label扩大选择热区,隐藏input元素, 2.添加一个元素设置其背景图作为默认显示的按钮图标并显示, 3.为该元素添加一个伪元素相对于添加的元素绝对定位且默认不显示,在该伪元素中添加默认选中的背景图 4.在input元素选中后,显示该伪元素,因为伪元素是绝对定位层级比较高所以会显示在上面,即选中的图标 三.HTML <input name=price type=radio value=1 /> 100-500</