CSS去除移動端點選時元素產生的背景色

佚名發表於2018-12-18
文章主要介紹了CSS去除移動端點選時元素產生的背景色,程式碼很簡單,需要的朋友跟隨小編一起看看吧

在點選產生背景色的元素的css樣式上加上以下程式碼:   

  1. -webkit-tap-highlight-color: transparent;

ps:下面看下css取消a標籤在移動端點選時的背景顏色

一、取消a標籤在移動端點選時的藍色

  1. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  2. -webkit-user-select: none;
  3. -moz-user-focus: none;
  4. -moz-user-select: none;

二、使用圖片作為a標籤的點選按鈕時,當觸發touchstart的時候,往往會有一個灰色的背景

  1. a,a:hover,a:active,a:visited,a:link,a:focus{
  2. -webkit-tap-highlight-color:rgba(0,0,0,0);
  3. -webkit-tap-highlight-color: transparent;
  4. outline:none;
  5. background: none;
  6. text-decoration: none;
  7. }

三、改變選中內容的背景顏色

  1. ::selection {
  2. background: #FFF;
  3. color: #333;
  4. }
  5. ::-moz-selection {
  6. background: #FFF;
  7. color: #333;
  8. }
  9. ::-webkit-selection {
  10. background: #FFF;
  11. color: #333;
  12. }

  四、去除iOS input框點選時的灰色背景

  1. -webkit-tap-highlight-color:rgba(0,0,0,0);

總結

以上所述是小編給大家介紹的CSS去除移動端點選時元素產生的背景色,希望對大家有所幫助。

相關文章