CSS去除移动端点击时元素产生的背景色

文章主要介绍了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去除移动端点击时元素产生的背景色,希望对大家有所帮助。