首页 > 代码库 > CSS 去除浏览器默认 轮廓外框

CSS 去除浏览器默认 轮廓外框

2024-11-02 19:05:39   210人阅读

 在默认情况下，点击 a 标签，input，或者添加click事件的时候，浏览器留下一个轮廓外框（chrome之下为蓝色）~ 然而这些默认的轮廓外框，有时候很影响美观，并不是我们想保留的。 我们应如何消除这些讨厌的 轮廓外框呢？

使用outline:none去除轮廓外框

如：

a{ outline:none; }

PC端轮廓外框消失了，然而发现在手机上依然存在~~

这时候添加如下代码便可

a{
     outline:none; 
     -webkit-tap-highlight-color:rgba(0,0,0,0);
}

 

-webkit-tap-highlight-color 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。

该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。

语法：

-webkit-tap-highlight-color：color

默认值： inherit

适用于：链接元素比如新窗口打开，img元素比如保存图像等等

取值：

color：颜色值
transparent：透明值

* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

兼容性：

  • iOS 1.1.1及更高版本的Safari浏览器可用
  • 大部分android手机也是支持的，只是显示效果有所不同。

PS：本文转自http://www.cnblogs.com/AllenChou/p/4726012.html，感谢分享

CSS 去除浏览器默认 轮廓外框


联系
我们