首页 > 代码库 > radio checkbox 修改默认样式

radio checkbox 修改默认样式

2024-09-17 11:37:52   206人阅读

 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>

 

radio checkbox 修改默认样式


联系
我们