radio checkbox 修改默认样式

仔仔
CSS笔记
2023-05-04
1391热度
0评论

radio

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>radio与checbox修改默认样式</title>
    <style>
    body{font-size: 12px;}
    /*radio*/

    .radio-input label { font-weight: normal; }
    .radio-input label { position: relative; width: 56px; }
    .radio-input label:nth-child(2) { margin-left: 20px; }
    .radio-input label:before { content: ""; display: inline-block; width: 14px; height: 14px; border: 1px solid #cfcfcf; border-radius: 50%; vertical-align: middle; margin-right: 5px; }
    .radio-input input { width: 1px; height: 1px; opacity: 0; }
    .radio-input input:checked + i { width: 8px; height: 8px; background-color: #5faee3; border-radius: 50%; position: absolute; top: 6px; left: 3px; }
    @-moz-document url-prefix() {
        .radio-input label { width: 100px; }
        #turntable_form3 .radio-input label:nth-child(2) { margin-left: 0; }
        #turntable_form3 .radio-input input:checked + i { top: 10px; }
        #turntable_form3 .radio-input label:before { margin-right: -10px; }
    }

    /*radio*/

    /*checkbox*/

    .c input[type="checkbox"] { width: auto; height: auto; opacity: 0; vertical-align: middle; }
    .c i { display: inline-block; width: 14px; height: 14px; border: 1px solid #cfcfcf; text-align: center; line-height: 14px; margin-left: 8px; left: 0; position: absolute; }
    .c input[type="checkbox"]:checked + i:before { content: "\2713"; display: inline-block; color: #de2230; }
    .c label { position: relative; padding-left: 18px; margin-bottom: 0; }
    /*checkbox*/
    </style>
</head>

<body>
    <div class="control-input radio-input">
        <label for="yes">
            <input type="radio" name="use" id="yes" checked="checked"><i class="inline"></i>启用</label>
        <label for="no">
            <input type="radio" name="use" id="no"><i class="inline"></i>禁用</label>
    </div>
    <br><br><br><br><br>
    <!-- checkbox -->
    <div class="c">
        <label>
            <input type="checkbox" checked="checked" />全选<i></i>
        </label>
    </div>
    <!-- checkbox -->
</body>

</html>

checkbox

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="telephone=no" name="format-detection" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <title>test</title>
    <style>
        label {
            position: relative;
            cursor: pointer;
        }

        label .input {
            cursor: pointer;
        }

        input:checked+.show-box {
            background: white;
            /* 这里取个巧，与下面颜色一样而已*/
        }

        .show-box {
            position: absolute;
            top: 1px;
            left: 1px;
            width: 16px;
            height: 16px;
            border-radius: 2px;
            background: #ec6337;
        }

        .show-box:before {
            /* 使用了 absolute 所以无所谓是 before 还是 after*/
            content: '';
            /* 空白内容占位，当做盒模型处理，见下面*/
            position: absolute;
            top: 2px;
            left: 6px;
            width: 3px;
            /* 勾的短边*/
            height: 8px;
            /* 勾的长边*/
            border: solid white;
            /* 勾的颜色*/
            border-width: 0 2px 2px 0;
            /* 勾的宽度*/
            transform: rotate(45deg);
            /* 定制宽高加上旋转可以伪装内部的白色勾*/
        }
    </style>
</head>

<body>
    <label>
        <!-- 注意嵌在 label 里面 记住密码 -->
        <input type="checkbox" />
        <!--  注意嵌在 label 里面 -->
        <div class="show-box" />
    </label>


</body>

</html>