HTML的checkbox和radio样式美化的简单实例

HTML的checkbox和radio样式美化的简单实例

checkbox：

1. <style type="text/css">  
2.     input[type="checkbox"]   
3.     {   
4.         display: none;   
5.     }   
6.   
7.         input[type="checkbox"] + label   
8.         {   
9.             display: inline-block;   
10.             position: relative;   
11.             border: solid 2px #99a1a7;   
12.             width: 35px;   
13.             height: 35px;   
14.             line-height: 35px;   
15.             border-radius: 4px;   
16.         }   
17.   
18.         input[type="checkbox"]:checked + label:after   
19.         {   
20.             content: '\2714';   
21.             font-size: 25px;   
22.             color: #99a1a7;   
23.             width: 35px;   
24.             height: 35px;   
25.             line-height: 35px;   
26.             position: absolute;   
27.             text-align: center;   
28.             background-color: #e9ecee;   
29.         }   
30.   
31.     .tab   
32.     {   
33.         margin-top: 20px;   
34.         margin-bottom: 20px;   
35.         width: 100%;   
36.     }   
37.   
38.         .tab td   
39.         {   
40.             border: solid 1px #f99;   
41.             font-size: 25px;   
42.             line-height: 39px;   
43.         }   
44. </style>  
45.   
46. <table class="tab" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">  
47.     <tr>  
48.         <td>  
49.             <div align="center" style="float: left; height: 39px; width: 39px;">  
50.                 <input id="ck101" type="checkbox" />  
51.                 <label for="ck101"></label>  
52.             </div>  
53.             <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
54.                 测试101   
55.             </div>  
56.             <div align="center" style="float: left; height: 39px; width: 39px;">  
57.                 <input id="ck102" type="checkbox" />  
58.                 <label for="ck102"></label>  
59.             </div>  
60.             <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
61.                 测试102   
62.             </div>  
63.             测试   
64.         </td>  
65.         <td></td>  
66.     </tr>  
67.     <tr>  
68.         <td style="text-align: center;">  
69.             <div style="display: inline-block;">  
70.                 <div align="center" style="float: left; height: 39px; width: 39px;">  
71.                     <input id="ck103" type="checkbox" />  
72.                     <label for="ck103"></label>  
73.                 </div>  
74.                 <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
75.                     测试103   
76.                 </div>  
77.                 <div align="center" style="float: left; height: 39px; width: 39px;">  
78.                     <input id="ck104" type="checkbox" />  
79.                     <label for="ck104"></label>  
80.                 </div>  
81.                 <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
82.                     测试104   
83.                 </div>  
84.                 测试   
85.             </div>  
86.         </td>  
87.         <td>测试   
88.         </td>  
89.     </tr>  
90. </table>  
91.   
92. <div style="border: solid 1px #f99; height: 39px; margin-top: 20px; margin-bottom: 20px;">  
93.     <div align="center" style="float: left; height: 39px; width: 39px;">  
94.         <input id="ck201" type="checkbox" />  
95.         <label for="ck201"></label>  
96.     </div>  
97.     <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
98.         测试201   
99.     </div>  
100.     <div align="center" style="float: left; height: 39px; width: 39px;">  
101.         <input id="ck202" type="checkbox" />  
102.         <label for="ck202"></label>  
103.     </div>  
104.     <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;">  
105.         测试202   
106.     </div>  
107. </div>  

radio：

1. <style type="text/css">  
2.     input[type="radio"]   
3.     {   
4.         display: none;   
5.     }   
6.   
7.         input[type="radio"] + label   
8.         {   
9.             display: inline-block;   
10.             position: relative;   
11.             border: solid 2px #99a1a7;   
12.             width: 25px;   
13.             height: 25px;   
14.             line-height: 25px;   
15.             padding: 5px;   
16.             border-radius: 19.5px;   
17.         }   
18.   
19.         input[type="radio"]:checked + label:after   
20.         {   
21.             content: ' ';   
22.             font-size: 25px;   
23.             color: #99a1a7;   
24.             width: 25px;   
25.             height: 25px;   
26.             line-height: 25px;   
27.             position: absolute;   
28.             text-align: center;   
29.             background-color: #99a1a7;   
30.             border-radius: 12.5px;   
31.         }   
32.   
33.         input[type="radio"]:checked + label   
34.         {   
35.             background-color: #e9ecee;   
36.         }   
37.   
38.     .tab   
39.     {   
40.         margin-top: 20px;   
41.         margin-bottom: 20px;   
42.         width: 100%;   
43.     }   
44.   
45.         .tab td   
46.         {   
47.             border: solid 1px #f99;   
48.             font-size: 25px;   
49.             line-height: 39px;   
50.         }   
51. </style>  
52.   
53. <table class="tab" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">  
54.     <tr>  
55.         <td>  
56.             <div align="center" style="float: left; height: 39px; width: 39px;">  
57.                 <input id="rd101" name="rd" type="radio" />  
58.                 <label for="rd101"></label>  
59.             </div>  
60.             <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
61.                 测试101   
62.             </div>  
63.             <div align="center" style="float: left; height: 39px; width: 39px;">  
64.                 <input id="rd102" name="rd" type="radio" />  
65.                 <label for="rd102"></label>  
66.             </div>  
67.             <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
68.                 测试102   
69.             </div>  
70.             测试   
71.         </td>  
72.         <td></td>  
73.     </tr>  
74.     <tr>  
75.         <td style="text-align: center;">  
76.             <div style="display: inline-block;">  
77.                 <div align="center" style="float: left; height: 39px; width: 39px;">  
78.                     <input id="rd103" name="rd" type="radio" />  
79.                     <label for="rd103"></label>  
80.                 </div>  
81.                 <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
82.                     测试103   
83.                 </div>  
84.                 <div align="center" style="float: left; height: 39px; width: 39px;">  
85.                     <input id="rd104" name="rd" type="radio" />  
86.                     <label for="rd104"></label>  
87.                 </div>  
88.                 <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
89.                     测试104   
90.                 </div>  
91.                 测试   
92.             </div>  
93.         </td>  
94.         <td>测试   
95.         </td>  
96.     </tr>  
97. </table>  
98.   
99. <div style="border: solid 1px #f99; height: 39px; margin-top: 20px; margin-bottom: 20px;">  
100.     <div align="center" style="float: left; height: 39px; width: 39px;">  
101.         <input id="rd201" name="rd" type="radio" />  
102.         <label for="rd201"></label>  
103.     </div>  
104.     <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
105.         测试201   
106.     </div>  
107.     <div align="center" style="float: left; height: 39px; width: 39px;">  
108.         <input id="rd202" name="rd" type="radio" />  
109.         <label for="rd202"></label>  
110.     </div>  
111.     <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;">  
112.         测试202   
113.     </div>  
114. </div>  

 效果图：

以上这篇HTML的checkbox和radio样式美化的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/shouce/archive/2016/06/08/5569173.html