ios html5 网页取消默认样式

ios的的默认样式修改成扁平化的样式

重要的一句css -webkit-appearance: none; 将样式清除

单数会出现将raido的选择按钮也会消失

所以需要对radio的样式进行重新设置

设置input框的样式

     input[type="text"]{-webkit-appearance: none; font-size: 12px;}

设置radio选择之前和之后的样式

 1   input[type="radio"]:checked , input[type="checkbox"]:checked {
 2   -webkit-appearance: none; 
 3 border-color: #f67200;
 4 background-color: #f67200;
 5      
 6    
 7 }
 8 
 9   input[type="radio"], input[type="checkbox"] {
10 -webkit-appearance: none;
11     position: relative;
12     width: 14px;
13     height: 14px;
14     border: 1px solid #e6e6e6;
15     -webkit-border-radius: 7px;
16     border-radius: 7px;
17     background-color: #fff;
18     vertical-align: middle;
19 }
20    input[type="checkbox"] {
21 -webkit-appearance: none;
22     position: relative;
23     width: 14px;
24     height: 14px;
25     border: 1px solid #e6e6e6;
26     -webkit-border-radius: 2px;
27     border-radius: 2px;
28     background-color: #fff;
29     vertical-align: middle;
30 }

设置选择之后checkbox的样式

     input[type="checkbox"]:checked:after {
    content: '';
    position: absolute;
    left:  1px;
    top: 1px;
    width: 10px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
-webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
   
}