HTML使用纯css自定义radio单选按钮样式，可以随意改变风格（附源码）

<div class="box">
    <input type="radio" name="item" value="1">
    <label for="item1"></label>
</div>

.box{
  height     : 0.6rem;
  display    : flex;
  align-items: center;
  position   : relative;
  line-height: 30px;
}
 input[type="radio"] {
    width  : 20px;
    height : 20px;
    opacity: 0;
    z-index: 999;
 }

  label {
      position     : absolute;
      left         : 5px;
      width        : 20px;
      height       : 20px;
      border-radius: 50%;
      border       : 1px solid #999;
      cursor       : pointer;
   }

            /*设置选中的input的样式*/
            /* + 是兄弟选择器,获取选中后的label元素*/
            input:checked+label {
                background-color: #07c160;
                border          : 1px solid #07c160;
            }

            /*添加的加号与label进行拼接(一个矩形边框去掉上和左的边框),再旋转45度*/
            input:checked+label::after {
                position   : absolute;
                content    : "";
                width      : 5px;
                height     : 10px;
                top        : 3px;
                left       : 6px;
                border     : 2px solid #fff;
                border-top : none;
                border-left: none;
                transform  : rotate(45deg);
            }

 js:获取到checked的状态

$('#item1').click(function(){
　　console.log($(this).prop('checked'))
})