天天看點

移動端點選事件出現背景框以及pc端a标簽點選時出現背景框???

1、原因:移動端事件響應時會有預設的背景框顔色,a标簽active時也有預設的背景框顔色。

2、解決方法:

(1) 移動端讓背景框不顯示

-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
-moz-tap-highlight-color:rgba(0, 0, 0, 0);
-ms-tap-highlight-color:rgba(0, 0, 0, 0);
-o-tap-highlight-color:rgba(0, 0, 0, 0);
tap-highlight-color:rgba(0, 0, 0, 0);
           

(2) pc端重置a标簽active時的背景框顔色

a:active{
  background-color: 需要設定的顔色;
}
           

3、附加小技巧:

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

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

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