input的radio在苹果手机里的样式兼容，另外就是在苹果手机微信里的点击效果兼容。
常规样式
首先插入标签
<div class="condition">
<input type="radio">
<input type="radio">
</div>其次是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;
}chrome下的标准radio和选中样式
Firefox下的标准样式与选中
ios微信中的兼容
pc中的hover，在手机里自然是点击，但在苹果手机微信里点击却出不来，解决方法很简单在<body>里面加上ontouchstart就可以了，网上也有说要先得激活active的都可以尝试。