css自定义radio和checkbox样式

先说好处吧，样式好看（至少比默认样式好看），不会有兼容问题，设置简单，使用方便。

html代码：

<div class="radio-box">
        <input type="radio" name="pay-type" id="radio1"> 
        <label for="radio1" class="radio-stype">radio1</label>
    </div>

    <div class="radio-box">
        <input type="radio" name="pay-type" id="radio2"> 
        <label for="radio2" class="radio-stype">radio2</label>
    </div>
    <!-- ******华丽的分割线****** -->
    <div class="radio-box">
        <input type="checkbox" id="checked1"> 
        <label for="checked1" class="radio-stype">checked1</label>
    </div>
    <div class="radio-box">
        <input type="checkbox" id="checked2"> 
        <label for="checked2" class="radio-stype">checked2</label>
    </div>
    <div class="radio-box">
        <input type="checkbox" id="checked3"> 
        <label for="checked3" class="radio-stype">checked3</label>
    </div>

原始效果.png

添加css效果

 <style>
        .radio-box {
            position: relative;
            width: 200px;
            height: 70px;
            border: 1px solid #000;
        }

        .radio-box input[type=radio],
        .radio-box input[type=checkbox]{
            width: 20px;
            height: 20px;
            opacity: 0;
        }

        .radio-box input:checked+label.radio-stype {
            background-color: #07A9FF;
            border: 1px solid #07A9FF;
        }

        .radio-box label.radio-stype {
            position: absolute;
            top: 50%;
            left: 20px;
            width: 18px;
            height: 18px;
            margin-top: -9px;
            border-radius: 50%;
            border: 1px solid #9EA2A3;
            text-indent: 20px;
        }

        .radio-box input:checked+label.radio-stype::after {
            position: absolute;
            content: "";
            width: 4px;
            height: 9px;
            top: 2px;
            left: 6px;
            border: 2px solid #fff;
            border-top: none;
            border-left: none;
            transform: rotate(45deg);
        }
    </style>

设置后效果.png

思路：通过隐藏radio和checkbox的原始样式(opacity: 0)，设置label以及label的伪元素实现圆框以及选中的√。