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

本文转载自查看原文 2016-09-09 11:18 1822 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; 都可以将该阴影透明化，进而解决那个丑丑的边框问题

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 手机端去除a标签点击时的蓝色边框手机端页面中去除a标签点击时的默认样式 Html5-audio标签简介及手机端不自动播放问题通过电脑，模拟点击手机屏幕 /手机自动点击，刷金币? 手机端实现点击复制功能解决手机(移动端)点击事件失效问题手机点击返回出现弹窗，监听浏览器，手机返回键手机端页面，点击手机号拨打电话手机端页面访问PC页面自动跳手机端代码 input 在手机端中会出现阴影