自定义原生单选按钮input[type="radio"]样式的两种方式

原生单选按钮input[type=="radio"]的样式总是不那么友好，在不同的浏览器中表现不一。我们可以借助伪类来实现。

一、 控件与label 并列

<div class="choose-box">
     <input type="radio" id="yes" name="choose" />
     <label for="yes">是</label>
 </div>
 <div class="choose-box">
     <input type="radio" id="no" name="choose" />
     <label for="no">否</label>
 </div>

展示

思路

1、可以为<label>元素添加生成性内容（伪元素），用其来设置单选按钮的样式。
2、把真正的单选按钮隐藏起来。

代码

1、给label标签添加伪类
  需要注意的是，选中时使用background-clip裁剪内容时，padding会让内容撑大，故width、height要相应缩小。

.choose-box input[type="radio"] +label::before{
         content:'';
         display:inline-block;
         width:10px;
         height:10px;
         border-radius:50%;
         border:1px solid #0069AB;
         margin-right:15px;
     }
    .choose-box input[type="radio"]:checked + label::before{
        background-clip: content-box;
        background-color:#0069AB;
        width:6px;
        height:6px;
        padding:2px;
    }

2、隐藏原始按钮

.choose-box input[type="radio"]{
        position:absolute;
        clip:rect(0,0,0,0);
    }

3、注意让按钮和文字水平居中对齐

.choose-box label{
        display:inline-flex;
        flex-direction:row;
        align-items:center;
    }

二、控件置于label 内

 <label for="yes" class="choose-box"><input type="radio" id="yes" name="choose" />是</label>
 <label for="no" class="choose-box"><input type="radio" id="no" name="choose" />否</label>

展示

思路

  因为input嵌套在label标签内，不是并行的关系了，给label添加伪类用不了input标签的checked属性。故考虑直接给input标签添加伪类来实现。

小技巧

  给input标签添加伪类，那就不能用1中的方式隐藏原始的input的按钮，也不能使用display:none; 以及opacity:0; 等方式隐藏了，因为会直接隐藏到input的伪类的展示，可以通过设置input标签的width:0; height:0 来实现。按钮布局主要通过定位来实现，其他不变。

代码

.choose-box{
        padding-left:10px;
        position:relative;
        display:inline-block;
        height:40px;
        line-height:40px;
    }
    .choose-box input[type="radio"]::before{
        content:'';
        display:inline-block;
        width:10px;
        height:10px;
        border-radius:50%;
        border:1px solid #0069AB;
        margin-right:15px;
        position:absolute;
        top:15px;
        left:0;
    }
    .choose-box input[type="radio"]:checked::before{
        background-clip: content-box;
        background-color:#0069AB;
        width:6px;
        height:6px;
        padding:2px;
    }
    .choose-box input[type="radio"]{
        width:0;
        height:0;
    }