我们在用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. 第7章 Python类型、类、协议 第7.1节 面向对象程序设计的相关知识

    Python被视为一种面向对象的语言,在介绍Python类相关的内容前,本节对面向对象程序设计相关的概念进行简单介绍. 一.    类和对象(实例) 在面向对象的程序设计(OOP)过程中有两个重要概念 ...

  2. 第14.4节 使用IE浏览器获取网站访问的http信息

    上节<第14.3节 使用google浏览器获取网站访问的http信息>中介绍了使用Google浏览器怎么获取网站访问的http相关报文信息,本节介绍IE浏览器中怎么获取相关信息.以上节为基 ...

  3. Asp.net core中RedisMQ的简单应用

    最近一个外部的项目,使用到了消息队列,本来是用rabbitmq实现的,但是由于是部署到别人家的服务器上,想尽量简化一些,项目中本来也要接入了redis缓存,就尝试使用redis来实现简单的消息队列. ...

  4. 手把手教你写DI_2_小白徒手撸构造函数注入

    小白徒手撸构造函数注入 在上一节:手把手教你写DI_1_DI框架有什么? 我们已经知道我们要撸哪些东西了 那么我们开始动工吧,这里呢,我们找小白同学来表演下 小白同学 :我们先定义一下我们的广告招聘纸 ...

  5. 【置顶】Trotyl's OI tree

    \(\rm thx\):@\(\rm UntilMadow\) ! \(\color{Green}{\rm Pupil}\) :只会一点点 \(\color{blue}{\text{Expert}}\ ...

  6. Codeforces Edu Round 54 A-E

    A. Minimizing the String 很明显,贪心之比较从前往后第一个不一样的字符,所以可以从前往后考虑每一位,如果把它删除,他这一位就变成\(str[i + 1]\),所以只要\(str ...

  7. git相关操作

    git相关命令 基本操作 git init git add xxx git commit -m "first commit" git tag -a V1.0 -m '我的标签' g ...

  8. Office Word文件批量生成软件

    一.软件用途 如果Word文件模板固定,只是要素信息不同,则可以使用本软件批量生成Word文件. 软件下载地址(2020-12-6更新):https://files.cnblogs.com/files ...

  9. ES6、ES7、ES8

    ES6 https://es6.ruanyifeng.com/   ES7 1.Array.prototype.includes() includes()作用,是查找一个值在不在数组里,若是存在则返回 ...

  10. php代码审计小技巧

    1.file_put_contents()函数:众所周知此函数是将一个字符串写入至文件中. 看到此函数说明当传入数据为数组时,会被PHP强制转换为字符串,因此会绕过正则达到getshell的目的. & ...