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.