css 绘制checkbox,radio

如何用css绘制checkbox，radio等

复选框效果

form{ border: 1px solid #ccc; padding: 20px; width: 300px; margin: 30px auto; }

.wrapper{ margin-bottom: 10px; }

.box{ display: inline-block; position: relative; width: 20px; height: 20px; border: 2px solid orange; }

.box input{ position: absolute; top: 0; left: 0; top: -3px; left: -4px; width: 21px; height: 21px; opacity: 0; cursor: pointer; z-index: 5; }

.box span{ position: absolute; top: 1px; right: 6px; font-size: 19px; font-weight: bold; font-family: Arial; -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); -ms-transform: rotate(18deg); -o-transform: rotate(18deg); transform: rotate(18deg); color: orange; }

input[type="checkbox"]+span{ opacity: 0; }

input[type="checkbox"]:checked+span{ opacity: 1; }

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！