改變ios input樣式

原文地址

IOS 下 input[type=’tel’],input[type=’text’]輸入框，在觸發的時候，input會有一個灰色的背景色塊，一閃而過，網上搜素了很多關鍵字，都一無所獲，後來跟ios的開發同學聊了一下，他說ios有個原生的 highlight 的熟悉，原來如此。

-webkit-tap-highlight-color

這個屬性只用於iOS (iPhone和iPad)。當你點擊一個連結或者通過Javascript定義的可點擊元素的時候，它就會出現一個半透明的灰色背景。要重設這個表現，你可以設定-webkit-tap-highlight-color為任何顏色。
想要禁用這個高亮，設定顏色的alpha值為0即可。

-webkit-tap-highlight-color: transparent;

 

至此，解決問題，but。。。

在這個過程中，發現另外一個 css 屬性， -webkit-appearance

-webkit-appearance 是一個 不規範的屬性（unsupported WebKit property），它沒有出現在 CSS 規範草案中。-webkit-appearance是用來改變按鈕和其他控制項的外觀，使其外觀類似於原生控制項。

關於這個屬性以前寫過 解決iOS下無法正常渲染按鈕的問題 ，問題產生的原因是，iOS下的safari中有預設的按鈕樣式： input[type=“button”], input[type=“submit”], input[type=“reset”] { -webkit-appearance: push-button; white-space: pre; }

其中-webkit-appearance: push-button;就是將按鈕設定成iOS中預設原生控制項的樣式。

通常我們可以在相應的元素上加上 -webkit-appearance : none ;

來移除原生控制項樣式。

其他幾個比較有用的情況是，當我們希望某些元素設定成默寫系統原生控制項的樣式的時候，例如下面的span標籤設定成各種控制項的樣式： 按鈕

這個是類似與input type = search 時，右邊會出現一個小叉叉，太神奇了
等等