当前位置：首页 > news >正文

radio checkbox 修改默认样式

news 来源：原创 2024/4/27 14:46:48

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>radio与checbox修改默认样式</title>
 7     <style>
 8     body{font-size: 12px;}
 9     /*radio*/
10     
11     .radio-input label { font-weight: normal; }
12     .radio-input label { position: relative; width: 56px; }
13     .radio-input label:nth-child(2) { margin-left: 20px; }
14     .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; }
15     .radio-input input { width: 1px; height: 1px; opacity: 0; }
16     .radio-input input:checked + i { width: 8px; height: 8px; background-color: #5faee3; border-radius: 50%; position: absolute; top: 6px; left: 3px; }
17     @-moz-document url-prefix() {
18         .radio-input label { width: 100px; }
19         #turntable_form3 .radio-input label:nth-child(2) { margin-left: 0; }
20         #turntable_form3 .radio-input input:checked + i { top: 10px; }
21         #turntable_form3 .radio-input label:before { margin-right: -10px; }
22     }
23 
24     /*radio*/
25 
26     /*checkbox*/
27 
28     .c input[type="checkbox"] { width: auto; height: auto; opacity: 0; vertical-align: middle; }
29     .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; }
30     .c input[type="checkbox"]:checked + i:before { content: "\2713"; display: inline-block; color: #de2230; }
31     .c label { position: relative; padding-left: 18px; margin-bottom: 0; }
32     /*checkbox*/
33     </style>
34 </head>
35 
36 <body>
37     <div class="control-input radio-input">
38         <label for="yes">
39             <input type="radio" name="use" id="yes" checked="checked"><i class="inline"></i>启用</label>
40         <label for="no">
41             <input type="radio" name="use" id="no"><i class="inline"></i>禁用</label>
42     </div>
43     <br><br><br><br><br>
44     <!-- checkbox -->
45     <div class="c">
46         <label>
47             <input type="checkbox" checked="checked" />全选<i></i>
48         </label>
49     </div>
50     <!-- checkbox -->
51 </body>
52 
53 </html>

2.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>