HTML代码：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><title></title><linkhref="//cdn.bootcss.com/bootstrap/3.0.3/css/bootstrap.min.css"rel="stylesheet"><linkhref="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css"rel="stylesheet"/></head><body><formaction=""><labelclass="checkbox"><inputtype="checkbox"class="original"name="checkbox"value="xuanzhong"><spanclass="new">checkbox</span></label><labelclass="radio"><inputname="radioOption"type="radio"class="original"value="radio1"><spanclass="new">radio1</span></label><labelclass="radio"><inputname="radioOption"type="radio"class="original"value="radio2"><spanclass="new">radio2</span></label><buttontype="submit"class="btnbtn-success">提交</button></form></body></html>



CSS代码：

/*给原始的复选框和单选按钮设置样式*/input[type=checkbox].original,input[type=radio].original{opacity:0;z-index:1;width:18px;height:18px;cursor:pointer;}/*给新的复选框和单选按钮设置同样的大小*/input[type=checkbox].original+.new,input[type=radio].original+.new{display:inline-block;margin:0;line-height:20px;min-height:18px;min-width:18px;font-weight:normal;cursor:pointer;}/*把原始的复选框和单选按钮彻底隐藏起来*/labelinput[type=checkbox].original,labelinput[type=radio].original{z-index:-100!important;width:0!important;height:0!important;}/*彻底去掉原始的复选框和单选按钮选中时的边框轮廓*/input[type=checkbox].original:checked,input[type=radio].original:checked,input[type=checkbox].original:focus,input[type=radio].original:focus{outline:none!important;}/*新的复选框和单选按钮公共样式*/input[type=checkbox].original+.new::before,input[type=radio].original+.new::before{cursor:pointer;font-family:fontAwesome;font-weight:normal;font-size:12px;color:#32a3ce;content:"\a0";background-color:#FAFAFA;border:1pxsolid#c8c8c8;box-shadow:01px2pxrgba(0,0,0,0.05);border-radius:0;display:inline-block;text-align:center;height:16px;line-height:14px;min-width:16px;margin-right:1px;}/*新的单选按钮单独样式*/input[type=radio].original+.new::before{border-radius:100%;font-size:10px;text-shadow:001px#32a3ce;line-height:16px;height:17px;min-width:17px;}/*新的复选框和单选按钮hover时边框的样式*/input[type=checkbox].original:hover+.new::before,input[type=radio].original:hover+.new::before,input[type=checkbox].original+.new:hover::before,input[type=radio].original+.new:hover::before{border-color:#ff893c;}/*新的复选框选中的样式*/input[type=checkbox].original:checked+.new::before,input[type=radio].original:checked+.new::before{display:inline-block;content:'\f00c';background-color:#f9a021;border-color:#f9a021;color:#FFF;box-shadow:01px2pxrgba(0,0,0,0.05),inset0-15px10px-12pxrgba(0,0,0,0.05),inset15px10px-12pxrgba(255,255,255,0.1);}/*新的单选按钮选中的样式*/input[type=radio].original:checked+.new::before{content:"\f111";color:#32a3ce;background-color:#FAFAFA;}



运行效果截图：


从效果图中可以看到，不仅传统的checkbox 和 radio样式改变了，而且最重要的是提交表单时，name和value属性一样可以正常获取


当然，这种用法依赖于bootstrap 和 fontawssome，如果没有这两个引用的话，是无法实现的