1. 程式人生 > >CSS3 修改和去除移動端點選事件出現的背景框 (tap-highlight-color)

CSS3 修改和去除移動端點選事件出現的背景框 (tap-highlight-color)

最近研究移動端頁面時學到了很多CSS3的有用屬性,其中有一個印象比較深刻的屬性:

-webkit-tap-highlight-color

這個屬性是用於設定元素在移動裝置(如Adnroid、iOS)上被觸發點選事件時,響應的背景框的顏色。

例如在Adnroid版本的微信中,點選a標籤時將會出現一個橙色的小框表示點選的響應。

此時,如果對元素設定了tap-highlight-color值,例如:

-webkit-tap-highlight-color: rgba(240,240,240,0.7);

則可改變元素被點選時背景框的顏色。

如果需要背景框不顯示,則可以將rgba中的alpha值設為0即可,例如rgba(0,0,0,0)

另外還有一個設定選中文字顏色的方法。

通常我們選中文字時的背景色是藍色。我們可以用以下樣式去設定網頁的選中內容的樣式:

::selection             { background:#FFF; color:#333; }

::-moz-selection    { background:#FFF; color:#333; }

::-webkit-selection { background:#FFF; color:#333;}

如果要去掉選中時的顏色,把background都置為none就行了。