改变input tpye 属性radio css 样式！！！

// html部分
<div class="Report_for_right">
  <input type="radio" name="Report_radio">
  <label></label>
</div>
//css

.Report_for_right{
  float: right;
  position: relative;
  input{
    z-index: 100;
  }
  input[type="radio"] {
    /*width: 40px;*/
    // 这里把默认的圆点透明度设置为0，并且把 label 标签的层级设置成高于默认的radio层级
    opacity: 0;
    z-index: 100!important;
    height: 20px;
  }
  label {
    position: absolute;
    right: 10px;
    top:12px;
    border: 1px solid #ddd;
    width: 15px;
    height: 15px;
    text-align: center;
    // 点击显示成绿色部分，其实是radio的部分，只不过对radio进行了透明处理而已。
    z-index:1;
    /**/
    border-radius: 50px;
    color: #333;
  }
  input:checked+label {
    background-color: #ff6160;
    border-radius: 50px;
    color: white;
  }
}




注释：如有错误！请留言

转载于:https://www.cnblogs.com/Liu-yz/p/10820280.html