html,css制作单选框

首先大家都知道默认的radio，checkbox，样式，过于简单，在工作通都需要重新制作，所以这篇文章是从新制作一个单选框

首先看效果图

我们制作的思路是自己写出一个单选框样式，然后通过checked伪类元素，来添加动态效果

 label元素是为了让文字与单选框进行关联起来

    <form>
        <span>性别：</span>
        <label>
            <input name="sex" type="radio">
            <span class="radio"></span>
            <span class="re">男</span>

        </label>
        <label>
            <input name="sex" type="radio">
            <span class="radio"></span>
            <span class="re">女</span>
        </label>
    </form>

在.radio元素上面，制作好自己构想的单选框的样式

        .radio {
            width: 25px;
            height: 25px;
            position: relative;
            display: inline-block;
            border: 2px solid #f40;
            border-radius: 50%;
            vertical-align: middle;
        }

        input[type="radio"]:checked+.radio::after {
            border-radius: 50%;
            position: absolute;
            width: 10px;
            height: 10px;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            content: "";
            background: #f40;
            z-index: 1;
            margin: auto;
        }