我们在用html标签时，如input、button、select，img标签时，点击标签经常出现一个蓝色的边框，这个边框真的很low，想要去掉怎么办

 

其实，css有样式可以设置一下，这个问题就轻松解决了，这个问题困扰了我很长时间，因为一直没多大影响所以没处理，就一句样式代码： outline:none;

解决图片超链接有蓝边的问题

<img src="pic/001.jpg" width=65 >

<img src="pic/001.jpg" width=65 border=0 >

把border设为0就可以消除蓝色的边框。

如果用到锚点时候，还是会出现包围框，这时就要用到：CSS属性outline

<
style type="text/css">

a,input,button{ outline:none; }

::-moz-focus-inner{border:0px;}

</style>

</head>

<body>

<a href="http://www.admin10000.com" target="_blank"><img src="http://www.admin10000.com/skin/logo.jpg" border="0"></a>

<a href="http://www.admin10000.com" target="_blank">admin10000.com</a>

<input type="button" value="admin10000.com"/>

<button>admin10000.com</button>

</body>

存在bug,其中input，button标签通过私有属性::-moz-focus-inner特别处理

以上方法在IE6、IE7下无效，可使用 onfocus 属性解决，如下：

　　<a href="http://www.admin10000.com" target="_blank"onfocus="this.blur()">admin10000.com</a>

　　//使用jquery方法只需一句，非常简单，支持所有浏览器

　　$("a,input,button").focus(function(){this.blur()});
 

Trick:如何去掉html标签点击时的蓝色边框的更多相关文章

  1. 如何消除移动端a标签点击时的蓝色底色以及a标签link、visited、hover、active的顺序

    1.消除a标签移动端点击时的蓝色底色 -webkit-tap-highlight-color:transparent 2.link.visited.hover.active的顺序 a:link{tex ...

  2. 39.css3----button按钮点击时出现蓝色边框

    css控制Button 按钮的点击时候出现蓝色边框http://www.inbeijing.org/archives/1139 Button 按钮的点击时候出现蓝色边框的问题 添加css属性,这样在点 ...

  3. 移动端去掉a标签点击时出现的背景

    之前做移动端的Portal时,手机上测试,点击a标签总是出现一个背景框 在CSS中添加 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);就可以了 a:act ...

  4. 【web】a标签点击时跳出确认框

    [web]a标签点击时跳出确认框 https://blog.csdn.net/michael_ouyang/article/details/52765575需求如下: 在跳转链接前,需要判断该用户是否 ...

  5. 去除input标签点击时的默认样式

    去除input标签点击时的默认样式的方法 outline:none; //去除点击时的边框 border : none; //去除input框的边框

  6. input，button制作按钮IE6，IE7点击时1px黑边框的解决方法

    按钮在IE6中点击时1px黑边框的最常见的解决方法 首先设置按钮为none,然后在按钮外面套一层来实现边框的效果,部分代码如下 .btnbox{ border:solid 1px red;} .btn ...

  7. 去除ios系统a标签点击时的灰色背景

    使用图片作为a标签的点击按钮时,当触发touchstart的时候,往往会有一个灰色的背景,想要去掉的话可以用下面这种方式 a,a:hover,a:active,a:visited,a:link,a:f ...

  8. 去掉input框点击时的默认颜色

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...

  9. html页面多个a标签点击时显示不同的样式

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

随机推荐

  1. JZOJ8月15日提高组反思——2020年暑假终结篇

    JZOJ8月15日提高组反思--2020年暑假终结篇 T1 仙人掌最短路 抱歉我只会最短路 仙人掌是啥? 听说是缩点+\(LCA\) 最短路30 T2 直接暴力计算 正解\(DP\) \(amazin ...

  2. 音视频处理基础知识扫盲：数字视频YUV像素表示法以及视频帧和编解码概念介绍

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt+moviepy音视频剪辑实战 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一. ...

  3. 第11.24节 Python 中re模块的其他函数

    一. re.compile函数 正则表达式编译函数,在后面章节专门介绍. 二. re.escape(pattern) re.escape是一个工具函数,用于对字符串pattern中所有可能被视为正则表 ...

  4. 关于kettle前后无依赖项关系的解决办法

    前几日我发了一个关于从cube里提取数据的kettle流程图,当时我测试了是正确的.今天我将N个这样的流程放到一个job里批量处理的时候,错误出现了,纠结了很久.我始终无法理解为什么单独执行是正确的, ...

  5. 初识python-名片管理系统v1.0

    一.项目说明 本项目分享一个简单的名片管理系统,主要是通过实现简单的功能,来学习python基础. 具体功能有:新建名片.显示全部名片.查询.修改.删除名片 通过对名片的增删改查,来快速看懂pytho ...

  6. Google浏览器PostMan插件版安装步骤

    PostMan插件版安装步骤: 第一步:把下载后的.crx扩展名的离线Chrome插件的文件扩展名改成.zip或者.rar 第二步:右键点击该文件,并使用压缩软件(如winrar.360压缩等)对该压 ...

  7. SQL Injection (Blind) Low

    SQL盲注分析 盲注较普通注入难度会有所增加,根据页面响应不同大概分为以下几种:布尔型盲注:时间盲注:报错注入 普通注入与盲注的对比: 普通注入:                            ...

  8. JVM 垃圾回收？全面详细安排！

    写在前面: 小伙伴儿们,大家好!今天来学习Java虚拟机相关内容,作为面试必问的知识点,来深入了解一波! 思维导图: image-20201207153125210 1,判断对象是否死亡 我们在进行垃 ...

  9. bootstrap table处理后台返回的数据

  10. ThreadX——IPC应用之信号量

    一.应用简介 在RTOS的应用开发中,信号量也是经常使用到的一种用于多任务之间信息同步.资源互斥访问的一种手段,常用于协调多个任务访问同一资源的场景.信号量又分为计数信号量和互斥信号量.计数信号量可以 ...