?

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);}

?

轉載于:https://www.cnblogs.com/silences/p/5261193.html

總結

以上是生活随笔為你收集整理的ios html5 网页取消默认样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。