Bootstrap用CSS美化checkbox复选按钮和raido单选按钮-适用于移动端

最终效果:

Bootstrap 1

 

兑现方式

 

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端。

相关文章