Home >Web Front-end >HTML Tutorial >CSS3 修改和去除移动端点击事件出现的背景框_html/css_WEB-ITnose

CSS3 修改和去除移动端点击事件出现的背景框_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:09:341214browse

移动端开发的一个很大的好处就是可以不管讨厌的IE浏览器的兼容性,只需要页面在火狐等一些高级浏览器中正常显示就行。
最近在写一些移动端的页面,刚好在今天遇到了这么一个神奇的css特性。那就是tap-highlight-color

这个特效是实现在移动端点击某个地方的时候,比如说按钮或者超链接的时候,系统会默认加上一些灰色的背景和一些高亮的效果。但是有的时候我们并不想要这些效果。并且希望点击的时候实现神不知鬼不觉的感觉,,这个时候就要用到tap-highlight-color了。只需要在点击的元素中加一个css样式即可,如下:
-webkit-tap-highlight-color:rgba(0,0,0,0);

这个样式还可以设置点击时候的背景色:例如:

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

则可改变元素被点击时背景框的颜色。

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

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

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

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

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

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn