去除移动端点击事件出现的背景框 (tap-highlight-color)

本文由清尘发表于2016-09-07 16:24属于HTML/CSS分类
html * {
  outline: 0;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: transparent; }

-webkit-tap-highlight-color 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。
该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。

-webkit-tap-highlight-color:color
默认值: inherit
适用于:链接元素比如新窗口打开,img元素比如保存图像等等

取值:
color:
颜色值
transparent:
透明值

另外还有一个设置选中文字颜色的方法。

通常我们选中文字时的背景色是蓝色。我们可以用以下样式去设置网页的选中内容的样式:

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

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

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

如果要去掉选中时的颜色,把background都置为none就行了。