input的radio 样式兼容（ios中的hover）
Posted 小凢
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了input的radio 样式兼容（ios中的hover）相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于input的radio 样式兼容（ios中的hover）的主要内容，如果未能解决你的问题，请参考以下文章