自定义常用input表单元素二：纯css实现自定义radio单选按钮

这是接着上一篇纯css自定义复选框checkbox的第二篇，自定义一个radio单选按钮，同样，采用css伪类和“+”css选择器为思路，下面是预览图：

 

下面直入主题放代码：HTML部分

<!--两个name相同的radio-->
<input type="radio" id="my_radio1" class="my_radio" name="my_radio">
 <label for="my_radio1">单选Radio1</label>
<br />
<input type="radio" id="my_radio2" class="my_radio" name="my_radio">
<label for="my_radio2">单选Radio2</label>

HTML代码没什么说的，就是普通的label和input,定义相同的name即可。

下面为CSS部分：

/*radio单选主要样式*/
.my_radio{opacity: 0;}
.my_radio+label::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    border: 1px solid #d9d9d9;
    position: absolute;
    top: 3px;
    left: -24px;
    box-sizing: border-box;
}

.my_radio:hover+label::before {
    -webkit-transition: all .3s;
    transition: all .3s;
    border-color: #1890ff
}

.my_radio:checked+label::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: #1890ff;
    position: absolute;
    top: 7px;
    left: -20px;
    border-color: #1890ff;
    -webkit-transition: all .3s;
    transition: all .3s;
}

四行css，第二行为radio最外层的圆圈,第四行为radio最里面选中时的实心圆。第三行为radio hover时的效果。其他样式自己可根据需要修改。