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

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

最终效果：

实现方法

index.html：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="checkbox">
<input type="checkbox" checked="checked">
</div>
<div class="radiobox">
<input type="radio" name="1" />
<input type="radio" name="1" checked="checked" />
</div>
</body>
</html>

style.css：

.checkbox,
.radiobox {
width: 1.8em;
height: 1.8em;
}
.checkbox input[type=checkbox],
.radiobox input[type=radio] {
-webkit-appearance: none;
background-color: transparent;
outline: 0 !important;
border:;
font-size: 1em !important;
}
.checkbox input[type=checkbox]:before,
.radiobox input[type=radio]:before {
display: inline-block;
text-align: center;
font: normal normal normal 14px/1 FontAwesome;
font-size: 1.8em;
font-weight: thin;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: rgb(212, 212, 212);
}
.checkbox input[type=checkbox]:checked:before,
.radiobox input[type=radio]:checked:before {
color: rgb(76, 184, 184);
}
.checkbox input[type=checkbox]:before {
content: "\f096";
}
.checkbox input[type=checkbox]:checked:before {
content: "\f14a";
}
.radiobox input[type=radio]:before {
content: "\f1db";
}
.radiobox input[type=radio]:checked:before {
content: "\f192";
}