在默认情况下,点击 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系列——浏览器默认样式

    了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...

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

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

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

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

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

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

  7. css 去除标签默认样式

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

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

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

  9. css去除苹果默认样式

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

随机推荐

  1. 暴力求解——素环数 Prime Ring Problem ,UVa 524

    Description A ring is composed of n (even number) circles as shown in diagram. Put natural numbers i ...

  2. BFS 10.1.5.253 1502

    http://10.1.5.253/acmhome/problemdetail.do?&method=showdetail&id=1502 //1502 #include <st ...

  3. zznu 1073: 海军节上的鸣炮声计算

    这是个一不留神就会出错的题目,首先大家可以想到在同一时间可能会有多个炮同时发射,不过观众只能听到一响,所以需要注意! 而且刚开始的时候所有的船都会发射一发,输入的a, b, c,都是时间间隔,

  4. composer安装第三方库

    生成composer.json 首先需要安装composer,composer -v出现如下,则表明安装成功. 编写composer.json { "name": "ww ...

  5. android里Toast的用法

    在活动中,可以通过findViewById()方法获取到在布局文件中定义的元素,这里我们传入R.id.button_1,来得到按钮的实例,这个值是刚才在first_layout.xml中通过andro ...

  6. paip.输入法编程----删除双字词简拼

    paip.输入法编程----删除双字词简拼 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net/at ...

  7. FFmpeg的HEVC解码器源码简单分析:解析器(Parser)部分

    ===================================================== HEVC源码分析文章列表: [解码 -libavcodec HEVC 解码器] FFmpeg ...

  8. 独立硬盘冗余阵列与HDFS

    http://zh.wikipedia.org/wiki/RAID 独立硬盘冗余阵列(RAID, Redundant Array of Independent Disks),旧称廉价磁盘冗余阵列(Re ...

  9. [转] C++虚函数与虚函数表

    http://www.cnblogs.com/Ripper-Y/archive/2012/05/15/2501930.html http://blog.csdn.net/haoel/article/d ...

  10. 优雅退出 Android 应用程序的 6 种方式

    我们先来看看几种常见的退出方法(不优雅的方式) 一.容器式 建立一个全局容器,把所有的Activity存储起来,退出时循环遍历finish所有Activity import java.util.Arr ...