移除手机端a标签点击自动出现的边框和背景

Posted 诩小贝

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移除手机端a标签点击自动出现的边框和背景相关的知识,希望对你有一定的参考价值。

手机端a标签会自动补充出现边框或者背景,使得用户知道a标签的点击状态,但样式很不好看

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        a{
            border:none;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            -webkit-tap-highlight-color:transparent;
            outline:none;
            }
    </style>
  </head>
  <body>
    <a href="https://www.baidu.com/">测试边框</a>
  </body>
</html>
其中对a添加样式
a{
            border:none;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            -webkit-tap-highlight-color:transparent;
            outline:none;
            }

-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent; 都可以将该阴影透明化,进而解决那个丑丑的边框问题

以上是关于移除手机端a标签点击自动出现的边框和背景的主要内容,如果未能解决你的问题,请参考以下文章

html5 audio 标签autoplay="autoplay"在手机预览网页无法自动播放背景音乐

怎么去除移动端点击a标签链接时的背景色

Android自定义控件3:带边框点击背景变色的textview,原型是支付宝手机充值中话费充值按钮

解决手机端页面的鼠标点击出现蓝色背景

Flutter设置圆角边框 Flutter圆角背景

手机端css怎么实现active改变点击的元素背景色?