"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源自网络