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>
时间： 2024-12-20 02:02:04