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

日期:2020-10-30 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

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.实际效果

 

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

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