首页 > 其他 > 详细

改写radio样式

时间:2018-10-30 12:51:51      阅读:153      评论:0      收藏:0      [点我收藏+]
<div class="test">
  <input type="radio" name="radioHouse" class="radio" id="big">
  <label for="big">大床房</label>
</div>
<div class="test">
  <input type="radio" name="radioHouse" class="radio" id="small">
  <label for="small">小床房</label>
</div>
 
.radio{
  position: absolute;  //隐藏label标签原本的样式
  clip: rect(0, 0, 0, 0);
}
.radio:checked + label::before{
  content: "\a0";
  display: inline-block;
  width:0.25rem;
  height:0.25rem;
  border-radius: 50%;
  opacity:0.9;
  border:0.05rem solid #55D8C2;
  background-clip: content-box;
  background-color: #01cd78;
  padding: .2em;
}
.radio + label::before{
  content: "\a0";
  display: inline-block;
  width:0.55rem;
  height:0.55rem;
  border-radius: 50%;
  opacity:0.9;
  border:0.05rem solid #999;
  text-indent: .15em;
  line-height: 0.5rem;
  margin-right: .4em;
  vertical-align: middle;
}

改写radio样式

原文:https://www.cnblogs.com/wangpeiyuan/p/9876002.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!