重置单选和多选按钮的样式，是自己用过的，在次记录
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html5上传</title> <style> input[type="radio"],input[type="checkbox"] { display: inline-block; 0.35rem; height: 0.35rem; cursor: pointer; background: #fff; font-size: 0.27rem; text-align: center; -webkit-appearance: none; border: 0.03rem solid #b1b1b1; vertical-align: middle; margin-top: -2px; margin-bottom: 1px; position: relative; } input[type="radio"] + label, input[type="checkbox"] + label { font-size: 0.28rem; line-height: 0.35rem; color: #6b6b6b; padding-left: 0.2rem; } input[type="radio"] { border-radius: 50%; } input[type="radio"]:checked, input[type="checkbox"]:checked { background: #00b0f4; border: 0px solid #c9c9c9; } input[type="radio"]:checked:before, input[type="radio"]:after, input[type="checkbox"]:checked:before, input[type="checkbox"]:checked:after { content: ""; pointer-events: none; position: absolute; color: white; border: 0.02rem solid; background-color: white; } input[type="radio"]:checked:before, input[type="checkbox"]:checked:before { 0.04rem; height: 0.02rem; left: 20%; top: 48%; transform: skew(0deg, 50deg); } input[type="radio"]:checked:after, input[type="checkbox"]:checked:checked:after { 0.1rem; height: 0.02rem; left: 40%; top: 42%; transform: skew(0deg, -50deg); } </style> </head> <body> <div class="one"> <input type="radio"/> <input type="checkbox"/> <input type="radio" /> <input type="checkbox" /> </div> </script> </body> </html>
