css 单选按钮标志更换的方式

日期：2021-03-17 类型：科技新闻 

关键词：h5互动游戏，微信h5怎么制作，h5转盘抽奖，h5测试制作，凡科H5

1.要求：更换单选按钮默认设置标志

2.基本原理：

　　1.应用label扩张挑选热区，掩藏input元素，

　　2.加上1个元素设定其情况图做为默认设置显示信息的按钮标志并显示信息，

　　3.为该元素加上1个伪元素相对加上的元素肯定精准定位且默认设置无法显示，在该伪元素中加上默认设置选定的情况图

　　4.在input元素选定后，显示信息该伪元素，由于伪元素是肯定精准定位等级较为高因此会显示信息在上面，即选定的标志

3.HTML

<label>
<input name="price" type="radio" value="1" />
<span className="show-radio"></span>
<p>100⑸00</p>
</label>

4.CSS

input{

　　display:none

};

 

.show-radio{
　　display: inline-block;
　　width:34px;
　　height:35px;
　　background:url('../../imgs/icons.png') no-repeat;
　　background-position:⑸29px ⑴80px;
　　vertical-align: middle;
　　position: relative;
}
.show-radio:before{
　　content:'';
　　display: none;
　　width:34px;
　　height:35px;
　　background:url('../../imgs/icons.png') no-repeat;
　　background-position:⑷74px ⑴80px;
　　vertical-align: middle;
　　position:absolute;
　　left:0;
　　top:0;
}
input:checked~show-radio:before{
　　display:block;
}

5.实际效果

 

近高度重视完成思路和关键编码，一部分省略，望见谅

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：css掩藏挪动端翻转条而且ios上光滑翻转的方式 返回下一篇：没有了