单选按钮样式重写

    浏览量:

原理,将原有的radio透明度变为0,然后用伪元素自己写一个代替

  • html部分
<div class="radio-box">
    <span>
        <input type="radio" name="tingpingkebiao" id="good">
        <label for="good">较好</label>
    </span>

    <span>
        <input type="radio" name="tingpingkebiao" id="normal">
        <label for="normal">普通</label>
    </span>

    <span>
        <input type="radio" name="tingpingkebiao" id="bad">
        <label for="bad">待改进</label>
    </span>
</div>
  • css部分
input[type="radio"]{
  opacity: 0;
}
/* 默认样式 */
input[type="radio"]+label::before{
  content: '';
  position: absolute;
  margin-left: -0.8rem;
  margin-top: .05rem;
  display: inline-block;
  width: 34/75rem;
  height: 34/75rem;
  line-height: 34/75rem;
  text-align: center;
  font-size: .1rem;
  color: #fff;
  border: solid 1px @grey;
  border-radius: 50%;
}
/* 选中以后 */
input[type="radio"]:checked+label::before{
  content: '✓';
  border: solid 1px #84b749;
  background: #84b749;
}


收起 >>
单选按钮样式重写