爱站程序员基地使用 -webkit-appearance: none;border-radius: 0; outline: 0; 更改单选框radio-复选框checkbox去掉默认样式，然后自己定义自己想要的单选框radio-复选框checkbox新样式，同时给他们添加点击新的点击效果。
最后样式如上所述…
[code]<title>消除表单自定义样式自己定义样式</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}p {position: relative;margin-left: 40px;}/* 消除原有样式样子 */input {/* 将样式去掉了... *//* iphone及ipad下输入框button,input,textarea默认内阴影 */-webkit-appearance: none;}input {border-radius: 0;outline: 0;}/* 自定义复选框 */input[type=\"checkbox\"] {width: 16px;height: 16px;border: 1px solid #ccc;}.gou {display: none;position: absolute;left: 3px;top: 5px;width: 10px;height: 5px;border-width: 0px 0px 2px 2px;border-style: solid;border-color: #333;transform: rotate(-45deg);}input[type=\"checkbox\"]:checked~.gou {display: block;}/* 自定义单选框 */input[type=\"radio\"] {width: 16px;height: 16px;border: 1px solid #ccc;border-radius: 50%;}.quan {display: none;position: absolute;left: 0;top: 0;width: 16px;height: 16px;border-radius: 50%;border: 2px solid #8b76f9;box-shadow: 0px 0px 3px 0px #8b76f9 inset;}input[type=\"radio\"]:checked+.quan {display: block;}</style></head><body><div class=\"contanier\"><p><input type=\"checkbox\" name=\"\" id=\"\"><!-- 自定义勾选 --><em class=\"gou\"></em></p><p><!-- 自定义圈圈样式 --><input type=\"radio\" name=\"sex\" id=\"\"><em class=\"quan\"></em></p><p><!-- 自定义圈圈样式 --><input type=\"radio\" name=\"sex\" id=\"\"><em class=\"quan\"></em></p></div></body>
