在默认情况下,点击 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-colorcolor

默认值: inherit

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

取值:

color:颜色值
transparent:透明值

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

兼容性:

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

CSS 去除浏览器默认 轮廓外框的更多相关文章

  1. css清除浏览器默认样式

    css清除浏览器默认样式(代替 *{}) 将代码放入 css 文件,使用 link 引入. /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/ ...

  2. -webkit-appearance: none; 去除浏览器默认样式

    -webkit-appearance: none;    去除浏览器默认样式

  3. CSS改变浏览器默认滚动条样式

    前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式   比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决   注:经测试,目 ...

  4. CSS之浏览器默认样式设置

    今天自己写css样式时,其中用到了<ul>标签,设置了一系列效果后运行,发现位置与设置有出入.chrome上打开检查项,发现<ul>标签的styles底部多了以下一段: ul, ...

  5. CSS之浏览器默认样式问题

    今天自己写css样式时,其中用到了<ul>标签,设置了一系列效果后运行,发现位置与设置有出入.chrome上打开检查项,发现<ul>标签的styles底部多了以下一段: ul, ...

  6. css 去除标签默认样式

    p,ul,ol,li,dl,dt,dd { list-style-type: none; margin: 0; padding: 0;}

  7. css修改浏览器默认的滚动条样式

    //滚动条样式 ::-webkit-scrollbar { width: 10px; } /* 垂直滚动条的滑动块 */ ::-webkit-scrollbar-thumb:vertical { bo ...

  8. css去除苹果默认样式

    input[type="button"], input[type="submit"], input[type="reset"] { -web ...

  9. reset.css(重置浏览器默认样式)

    @charset "utf-8";html{background-color:#fff;color:#000;font-size:12px} body,ul,ol,dl,dd,h1 ...

随机推荐

  1. POJ 2385 Apple Catching

    比起之前一直在刷的背包题,这道题可以算是最纯粹的dp了,写下简单题解. 题意是说cows在1树和2树下来回移动取苹果,有移动次数限制,问最后能拿到的最多苹果数,含有最优子结构性质,大致的状态转移也不难 ...

  2. HDU2602 Bone Collector 【01背包】

    Bone Collector Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  3. Filebeat工作原理

    在这篇文章中,您可以了解Filebeat的关键构建模块以及它们如何一起工作.了解这些概念将有助于您针对特定用例对Filebeat进行配置做出明智的决定.Filebeat由两个主要组件组成: prosp ...

  4. python3学习笔记七(字典)

    参照http://www.runoob.com/python3/python3-dictionary.html 字典 字典是另一种可变容器模型,且可以存储任意类型对象. dict1 = {key1:v ...

  5. php分页、正则验证

    //原装分页<?phpheader("Content-type:text/html;Charset=utf8"); $link=mysqli_connect("lo ...

  6. Python 变量(下)

    列表 列表是可修改的序列类型.所以列表不可以作为字典的键. >>> a = [1] >>> hash(a) Traceback (most recent call ...

  7. Genymotion使用分析

    1.从官网下载Genymotion Genymotion官方下载地址:https://www.genymotion.com/#!/download 没有注册,先进行注册 公司规模选择个人 2.Andr ...

  8. css总结11:css的overflow问题

    1 排版时经常遇到块级元素内容overflow,怎么妥当处理是一个关键. overflow的常用属性:  代码: <!DOCTYPE html><html lang="en ...

  9. Flashback Database 闪回数据库

    一.  Flashback Database 说明 Flashback Database 功能非常类似与 RMAN 的不完全恢复, 它可以把整个数据库回退到过去的某个时点的状态, 这个功能依赖于 Fl ...

  10. 附近wifi都是你的

    今天给大家介绍deauth攻击. 最终效果:附近你指定的任何wifi,别人都无法连接,即便连接上的也会断掉. 由于我在 “世界虽大,但没有破不了的wifi”  这篇文章中写的很详细,所以我在这里就步详 ...