标签：样式 doc 括号 oct ext html 点击 inpu none
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .condition input { display: inline-block; vertical-align: middle; /* 当成为行内块元素时它就可以垂直居中了 */ width: 20px; height: 20px; -webkit-appearance: none; /* 清除原有的样式 */ background-color: transparent; border: 0; outline: 0 !important; /* 去掉点击后外面可能会出现的蓝框 */ line-height: 20px; color: #d8d8d8; } .condition input:after { /* //在input的内容之后插入新内容 */ content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; text-align: center; line-height: 14px; font-size: 16px; color: #fff; border: 3px solid #ddd; background-color: #fff; box-sizing: border-box; /* 规定两个并排的带边框的框 */ } .condition input:checked:after { /* 选中之后的样子 */ content: "L"; transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0); /* 2D变换旋转，还有平移和缩放，平时旋转用rotate，这个写法是比较复杂一点的写法， 括号里面的六个值来得矩阵，实现2D变换，更详细的大家去百度查。 */ -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0); border-color: #099414; background-color: #099414; } </style> </head> <body> <div class="condition"> <input name="sex" type="radio"> <input name="sex" type="radio"> </div> </body> </html>
标签：样式 doc 括号 oct ext html 点击 inpu none
原文地址：https://www.cnblogs.com/fanting/p/9876785.html
