"web, 我觉得刚才秀的姿势不够纠结，缺乏了一点点内涵，无法表现input内心的复杂情感，请允许我再来一次，我会拿出百分百的状态，争取做到深刻而不深沉，平淡而不平庸，演好我的角色。其实，我是一名演员。"
——题记，改编源自《喜剧之王》
正文
写H5有时候遇到要打勾选择，比如说同意XXX，已阅读XXX啥的，而本人又不太想用图片切换，第一个就想到checkbox，而默认的样式又不是那么合意，总想设计自己的效果，抓耳挠腮，咋弄？今天我们便来解决这个问题，移动端H5，按例上效果图：
效果图
效果图.png
交互效果是当用户点击文字行或者圈圈，都可以选择打钩或去掉钩，多选框或单选框效果。
咋实现，一步一步来，先来个最基本的样子：
原图
怎么让选择框变美，首先，身材比例调一下（width，height），瞬间小家碧玉变得大气：
Paste_Image.png
然后稍微的隆一下border-radius，变得温婉些，前提要加上-webkit-appearance: none，才能改变：
Paste_Image.png
这时候选中效果是看不见的，因为默认样式已经去除，接下来修整下选中的状态，对勾怎么弄，利用隐士Unicode编码。'\2713'代表对钩，利用content来加入，并改变位置，颜色，实现了自我的展示。
主样式代码如下：
代码
主要是-webkit-appearance: none以及利用unicode编码，伪元素实现。
附上最终代码：
<style type="text/css">
.input-wrap {
width: 20rem;
height: 10rem;
padding-top: 5rem;
margin: auto;
background-color: #f99;
color: #fff;
text-align: center;
font-size: 23px;
}
input[type='checkbox'] {
position: relative;
width: 20px;
height: 20px;
-webkit-appearance: none;
margin-right: 10px;
border: 2px solid #fff;
border-radius: 50%;
}
/* input[type='checkbox']:checked {
clip: (0,0,0,0);
outline: 0;
background-color: transparent;
}*/
input[type='checkbox']:checked:after {
content: '\2713';
position: absolute;
left: 3px;
color: #fff;
-webkit-appearance: none;
}
</style>
---html---
<div class="input-wrap">
<label class="btn-admit admit"><input type="checkbox" id="save-in" name="saveIn" checked="checked" value="Bike" />我愿意 Yes,I do</label>
</div>
题外话，unicode编码还是很有用的，比如说实现下面的：
错误.png
正确.png
unicode源自网络
