一.需求:替换单选按钮默认图标
二.原理:
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;
- }
五.效果
近重视实现思路和重要代码,部分省略,望见谅
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
标签:
单选按钮
版权声明:本站所有图片/内容除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!