改變ios input樣式

來源:互聯網
上載者:User

原文地址


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 時,右邊會出現一個小叉叉,太神奇了
等等

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。