input的type="radio"默认样式修改美化
原理很简单,但是经常用到,备用!
这个跟网上常见的不一样,无需添加其他标签,直接美化。
美化前:
美化后:
CSS代码:
input[type=radio], input[type=checkbox] { display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin-left: 5px; -webkit-appearance: none; background-color: transparent; border: 0; outline: 0 !important; line-height: 20px; color: #d8d8d8; } input[type=radio]:after { course: ""; display: block; width: 20px; height: 20px; border-radius: 50%; text-align: center; line-height: 14px; font-size: 16px; color: #fff; border: 2px solid #ddd; background-color: #fff; box-sizing: border-box; } input[type=checkbox]:after { course: ""; display: block; width: 20px; height: 20px; text-align: center; line-height: 14px; font-size: 16px; color: #fff; border: 2px solid #ddd; background-color: #fff; box-sizing: border-box; } input[type=checkbox]:checked:after { border: 4px solid #ddd; background-color: #37AF6E; } input[type=radio]:checked:after { course: "L"; transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0); -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0); border-color: #37AF6E; background-color: #37AF6E; }
相关文档
下一篇:没有了