移动端页面点击出现色块解决方法

页面中使用<a>标签制作按钮时经常用伪类:active实现按钮按下之后反馈样式的展现。 在PC端,这种方法效果明显,但在移动端情况却不一样。 安卓系统下点击按钮,按钮上会浮现默认蓝色透明高亮色块,且不会展现设置的反馈。 苹果系统下点击按钮,按钮上会浮现默认黑色透明高亮色块,且不会展现设置的反馈。 这里就要使用控制高亮显示的属性了,即: -webkit-tap-highlight-color
它可以重设链接点击的高亮反馈,例如:

-webkit-tap-highlight-color:rgba(255, 0, 0, 0.5);
就是将高亮反馈设置为半透明的红色浮层。 要消去这种效果的方法是: online casino

html{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
如此,就可保证整个页面内,以

<a>标签制作的按钮在移动端点击时,默认的高亮消失。 需要注意的是,此时,Android系统中,点击按钮会依照设置的反馈样式显示,但在iOS系统中则只是默认高亮消失,不会显示反馈样式。

One thought on “移动端页面点击出现色块解决方法

Leave a Reply

Your email address will not be published. Required fields are marked *