最终效果：
实现方法
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";
}
该方法中用到了Font Awesome图标文字，上面代码中使用了Bootstrap CDN的方法添加了Font Awesome，也可以去Font Awesome官网下载到本地调用来使用。
Font Awesome官网：http://fontawesome.io/
此方法不兼容IE浏览器，只适用于移动端，不适用与PC端。