用CSS美化checkbox复选按钮和raido单选按钮-适用于移动端
最终效果：
实现方法
index.html：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="UTF-8"/> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 7 <link rel="stylesheet" type="text/css" href="style.css"/> 8 </head> 9 <body> 10 <div class="checkbox"> 11 <input type="checkbox" checked="checked"> 12 </div> 13 <div class="radiobox"> 14 <input type="radio" name="1" /> 15 <input type="radio" name="1" checked="checked" /> 16 </div> 17 </body> 18 </html>
style.css：
1 .checkbox, 2 .radiobox { 3 width: 1.8em; 4 height: 1.8em; 5 } 6 .checkbox input[type=checkbox], 7 .radiobox input[type=radio] { 8 -webkit-appearance: none; 9 background-color: transparent; 10 outline: 0 !important; 11 border: 0; 12 font-size: 1em !important; 13 } 14 .checkbox input[type=checkbox]:before, 15 .radiobox input[type=radio]:before { 16 display: inline-block; 17 text-align: center; 18 font: normal normal normal 14px/1 FontAwesome; 19 font-size: 1.8em; 20 font-weight: thin; 21 text-rendering: auto; 22 -webkit-font-smoothing: antialiased; 23 -moz-osx-font-smoothing: grayscale; 24 color: rgb(212, 212, 212); 25 } 26 .checkbox input[type=checkbox]:checked:before, 27 .radiobox input[type=radio]:checked:before { 28 color: rgb(76, 184, 184); 29 } 30 .checkbox input[type=checkbox]:before { 31 content: "\f096"; 32 } 33 .checkbox input[type=checkbox]:checked:before { 34 content: "\f14a"; 35 } 36 .radiobox input[type=radio]:before { 37 content: "\f1db"; 38 } 39 .radiobox input[type=radio]:checked:before { 40 content: "\f192"; 41 }
该方法中用到了Font Awesome图标文字，上面代码中使用了Bootstrap CDN的方法添加了Font Awesome，也可以去Font Awesome官网下载到本地调用来使用。
Font Awesome官网：http://fontawesome.io/
此方法不兼容IE浏览器，只适用于移动端，不适用与PC端。
