单，复选框的美化

效果如图：

HTML:radio：

<input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked /><label for="radio-1-1"></label>  

checkbox：

<input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox"/><label for="checkbox-2-1"></label>  

CSS如下：

/*radio美化start*/
.regular-radio {display: none;}
.regular-radio + label {-webkit-appearance: none;background-color: #cccccc;border: 1px solid #cacece;padding: 7px;border-radius: 50px;display: inline-block;position: relative;}
.regular-radio:checked + label:after {content: ' ';width: 6px;height: 6px;border-radius: 60px;position: absolute;top: 4px;background: #45aaff;left: 4px;}
/*radio美化end*/

/*checkbox美化start*/
label {display: inline;}
.regular-checkbox {display: none;}
.regular-checkbox + label {background-color: #fafafa;border: 1px solid #cacece;box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);padding: 9px;border-radius: 3px;display: inline-block;position: relative;top:2px;}
.regular-checkbox:checked + label {background-color: #e9ecee;border: 1px solid #adb8c0;box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);color: #99a1a7;}
.regular-checkbox:checked + label:after {content: '\2714';font-size: 14px;position: absolute;top: 2px;left: 3px;color: #99a1a7;}
.big-checkbox:checked + label:after {font-size: 19px;left: 2px;top:-2px;}
/*checkbox美化end*/

（1）：先将默认的单选或复选框的样式隐藏掉

（2）：在其后加入label标签以替代其原内容

（3）：设置其未激活时的样式，如本例中的点（使用border-radius：50pxl;)设置其成为一个圆形区块

（4）：已激活样式 .regular-radio:checked  +label:after{}：跟步骤3差不多，可以设置内容如复选框的勾或者其他样子，然后使用定位将其控制在区块的中心处。

注：content：’\2714‘为复选框中的勾