input消除默認,代碼如下
input{
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
-webkit-appearance:none;
outline: none;
border: none;
}
其中-webkit-appearance:none;用來改變按鈕在iPhone下的默認風格; //消除輸入框和按鈕的原生外觀,在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式 。 注意:不同type的input使用這個屬性之后表現不一。text、button無樣式,radio、checkbox直接消失。
對於 -webkit-tap-highlight-color ,這個屬性是指點擊元素顯示高亮,(input和a元素或者是可以點擊的元素在手機端點擊)當你點擊一個鏈接或者通過Javascript定義的可點擊元素的時候,它就會出現一個半透明的灰色背景,用戶體驗不好。
要重設這個表現,你可以設置-webkit-tap-highlight-color為任何顏色。
想要禁用這個高亮,設置顏色的alpha值為0即可。
示例:設置高亮色為50%透明的紅色:
-webkit-tap-highlight-color: rgba(255,0,0,0.5);
瀏覽器支持: 只有iOS(iPhone和iPad).
注:如果頁面可以點擊元素需要自定義設置高亮顏色,而-webkit-tap-highlight-color我們沒有做處理,我們自定義設置的高亮顏色就會被這個-webkit-tap-highlight-color默認樣式覆蓋顯示高亮顏色。
