超简单自定义单选框和复选框

在很多时候，浏览器自带的单选框和复选框的样式不够美观，并且浏览器的样式之间带有差异。已经不足以我们生产的需求。下面用css来自定义修改一下单选框与复选框的样式。
下面我是分享最简单的一种搞定自定义设置

效果图

首先定义需要设计的样式
 .radio-item .radio {
            width: 15px;
            height: 15px;
            border: 1px solid #999;
            cursor: pointer;
            display: inline-block;
            box-sizing: border-box;
        }
点击之后的样式
        .radio-item input:checked+.radio {
            border-color: #008c8c;
        }

        .radio-item input:checked~span {
            color: #008c8c;
        }
设计好外表样式 然受使用伪类进行设计里面的的样式 这个可以自定义设计了
        .radio-item input:checked+.radio::after {
            display: block;
            font-weight: bold;
            font-size: 24px;
            font-family: Sans-serif;
            background: transparent;
            content: "√";
            position: absolute;
            top: 6px;

        }
浏览器自带的样式可以隐藏掉了
        .radio-item input[type="radio"] {
            display: none;
        }



 <p>
        请选择性别：
        <label class="radio-item">
            <input name="gender" type="radio">
            <span class="radio"></span>
            <span>男</span>
        </label>

        <label class="radio-item">
            <input name="gender" type="radio">
            <span class="radio"></span>
            <span>女</span>
        </label>
    </p>

复选框
效果图

   /* 复选框 */
        .check-item .checkbox {
            display: inline-block;
            width: 14px;
            height: 14px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .check-item input:checked+.checkbox {
            border-color: #00a1d6;
        }

        .check-item input:checked~span {
            color: #00a1d6;
        }

        .check-item input:checked+.checkbox::after {
            content: "";
            display: block;
            width: 7px;
            height: 7px;
            background: #00a1d6;
            border-radius: 2px;
            margin-left: 2.5px;
            margin-top: 2.5px;
        }

        .check-item input[type="checkbox"] {
            display: none;
        }


  <p>
        请选择自己的兴趣还好:
        <label class="check-item">
            <input type="checkbox" name="habit">
            <span class="checkbox"></span>
            <span>篮球</span>
        </label>
        <label class="check-item">
            <input type="checkbox" name="habit">
            <span class="checkbox"></span>
            <span>篮球</span>
        </label>
        <label class="check-item">
            <input type="checkbox" name="habit">
            <span class="checkbox"></span>
            <span>篮球</span>
        </label>
    </p>

来源：CSDN

作者：你怎么也喜欢嘴巴嘟嘟

链接：https://blog.csdn.net/qq_41961239/article/details/103551153