Html开发手机端点击链接出现蓝色框框

时间：2023年06月03日阅读：801

以下内容仅是站长或网友个人学习笔记、总结和研究收藏。不保证正确性，因使用而带来的风险与本站无关！

在手机网页中点击某一个链接或是文本框后通常会在上面出现一个蓝色的透明的框（不同手机颜色有差别）。在网页中可以使用一个css修改这个框的颜色。

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

上述代码中设定颜色为白色，透明度为0。应用之后页面上点击后就看不到原来的那个框了。

　　如果需要加到所有元素上就是：

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-appearance:none;
}

-webkit-tap-highlight-color ：

当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。

要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮，设置颜色的alpha值为0即可。

-webkit-appearance：none | button | button-bevel ···
改变按钮和其他控件的外观，使其类似于原生控件。

以下是描述该问题的原文：

In an HTML 5 site a user, who's surfing through a mobile device, clicks a link.
The browser draws a box (rectangle) as a feedback (in addition to a sound).
Browser might mean Android 2.3's stock browser, or Opera Mobile.

I'd like to avoid this (blue) box. At least for iPhone and Android based devices. Any idea?

打赏

本文地址：https://www.momojc.cn/web/htmlkaifas.html

Html开发手机端点击链接出现蓝色框框

微信关注