css3 单选框美化

最新推荐文章于 2023-12-28 19:58:11 发布

Doris_sun

最新推荐文章于 2023-12-28 19:58:11 发布

阅读量1.1k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/Doris_sun/article/details/80391961

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

 <ul>
   
      <li><label class="my_protocol"><input type="radio" name="leixing" class="input_agreement_protocol"><span></span>身份证</label></li>
      <li><label class="my_protocol"><input type="radio" name="leixing" class="input_agreement_protocol"><span></span>军官证</label></li>
      <li><label class="my_protocol"><input type="radio" name="leixing" class="input_agreement_protocol"><span></span>护照</label></li>
  </ul>

/*隐藏checkbook*/
.my_protocol .input_agreement_protocol {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none;
}
/*未被选中时*/
.my_protocol .input_agreement_protocol + span {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  background: url("../images/icon_check.png") no-repeat;
  background-size: cover;
  margin-right: 0.4rem;
  float: left;
}
/*选中checkbox时，修改背景图*/
.my_protocol .input_agreement_protocol:checked + span {
  background: url("../images/icon_checkbox_checked.png") no-repeat;
  background-size: cover;
}