做一个好看的单选和多选框（CSS查漏补缺）

文: jack同学

jack同学

我们知道，单选框和复选框的样式几乎改变不了，原因是由于它们是可替换元素，样式更改权限较小，所以我们自己写一个简单好看的单选复选框

单选框

• html部分代码

    <label>
        <input type="radio" name="sex">
        <span class="radio"></span>
        <span class="item">男</span>
    </label>
    <label>
        <input type="radio" name="sex">
        <span class="radio"></span>
        <span class="item">女</span>
    </label>

• css部分代码

        label {
            font-size: 18px;
        }
        /* 把单选框隐藏 */
        label input[type="radio"] {
            display: none;
        }
        /* 自定义单选框初始样式 */
        label .radio {
            display: inline-block;
            position: relative;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid #777;
            vertical-align: -4px;
        }
        /* 自定义单选框选中样式 初始隐藏*/
        label .radio::after {
            content: "";
            width: 10px;
            height: 10px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: #299;
            border-radius: 50%;
            display: none;
        }
        /* 显示自定义单选框 */
        label input[type="radio"]:checked+.radio::after {
            display: block;
        }
        /* 切换自定义单选框border颜色 */
        label input[type="radio"]:checked+.radio {
            border-color: #299;
        }

        /* 选中时，文本加颜色 */
        label input[type="radio"]:checked~.item {
            color: #199;
        }

• 最终样式

jack同学

复选框

• html部分

    <label>
        <input type="checkbox" name="num">
        <span class="checkbox">
            <i>&check;</i>
        </span>
        <span class="item">一</span>
    </label>
    <label>
        <input type="checkbox" name="num">
        <span class="checkbox">
            <i>&check;</i>
        </span>
        <span class="item">二</span>
    </label>
    <label>
        <input type="checkbox" name="num">
        <span class="checkbox">
            <i>&check;</i>
        </span>
        <span class="item">三</span>
    </label>
    <label>
        <input type="checkbox" name="num">
        <span class="checkbox">
            <i>&check;</i>
        </span>
        <span class="item">四</span>
    </label>

• css部分

        label {
            font-size: 18px;
            margin: 0 10px;
        }

        /* 把多选框隐藏 */
        label input[type="checkbox"] {
            display: none;
        }

        /* 自定义多选框初始样式 */
        label .checkbox {
            display: inline-block;
            margin-right: 2px;
            position: relative;
            width: 16px;
            height: 16px;
            border: 2px solid #aaa;
            border-radius: 4px;
            vertical-align: -4px;
        }

        /* 自定义多选框选中样式 初始隐藏*/
        label .checkbox::after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: -1;
            background-color: #299;
            display: none;
        }
        label .checkbox i {
            font-weight: bolder;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            color: #fff;
            font-size: 14px;
        }
        /* 显示自定义多选框 */
        label input[type="checkbox"]:checked+.checkbox::after {
            display: block;
        }

        /* 切换自定义多选框border颜色 */
        label input[type="checkbox"]:checked+.checkbox {
            border-color: #299;
        }

        /* 选中时，文本加颜色 */
        label input[type="checkbox"]:checked~.item {
            color: #199;
        }

• 最终结果显示

jack同学

• 勾勾图标√我使用的是实体元素 ✓如果想使用其它方法比如图片图标，或者使用js控制切换图标都可以，总体来说思想就是这样了