重写input-radio单选框#美化单选框

重写input-radio单选框#美化单选框

好处在于可以修改单选框的样式，包括大小、颜色和文字的距离，也可以添加淡入淡出效果

正常单选框
修改过后的单选框

HTML部分：

<div class="input-radio">
    <label for="sex1">
      <input type="radio" name="sex" id="sex1" checked><span>男</span>
    </label>
    <label for="sex2">
      <input type="radio" name="sex" id="sex2"><span>女</span>
    </label>
  </div>

CSS部分：

.input-radio{
  cursor: pointer;
}
.input-radio span{
  display: inline-block;
  padding-left: 24px;
  position: relative;
}
.input-radio input{
  display: none;
}
.input-radio span::before{
  content: '';
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  position: absolute;
  border-radius: 50%;
  left: 0;
}
.input-radio span::after{
  content: '';
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  background-color: #999;
  position: absolute;
  border-radius: 50%;
  top: 5px;
  left: 5px;
  display: none;
}
.input-radio input:checked ~ span::after{
  display: block;
}