我们在用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. 在 Spring Boot 中使用 Flyway

    一.Flyway 介绍 Flyway 是一个开源的数据库迁移工具,MySQL, SQL Server, Oracle 等二十多种数据库 在 Flyway 中数据库的所有改变均称为迁移(migratio ...

  2. JMeter 安装 启动（即中文的修改）

    一.安装 (1).java 和 apache-jmeter-4.0 2.点击apache-jmeter-4.0进入bin目录,点击jmeter.bat 如果没有安装java就会出现下图 遇到上面是因为 ...

  3. jdk版本下载

    oracleJDK oracle各版本下载地址:https://www.oracle.com/technetwork/java/archive-139210.html openJDK 编译好的 ojd ...

  4. LoadRunner 多用户并发 登录，上传数据，登出的脚本教程

    这里记录 Web/Http  模式,模拟多用户并发进行  : 登录,上传数据,退出登录一整套流程.并发的用户量多少,可自定义.这里不介绍录屏的方式,是自己写脚本去执行的. 1.安装loadRunner ...

  5. aspnetcore webapi 解决发布以后每隔一段时间请求变缓慢

    项目:netcore webapi 3.1 平台:windows server 2008 r2 服务器:IIS 7.5 项目发布到IIS以后第一次请求特别慢大概7.8秒,然后每隔5分钟请求一次大概2. ...

  6. 【JVM】类加载器与双亲委派

    类加载器,顾名思义,即是实现类加载的功能模块,负责将Class的字节码形式加载成内存形式的Class对象.字节码文件可来源于磁盘或者jar包中的Class文件,也可以来自网络字节流. 类加载器 在JV ...

  7. mysql 列转行 动态写法

    -- 列转行动态sql -- 测试表DROP TABLE IF EXISTS `tb_score`; CREATE TABLE `tb_score` ( `id` int(11) NOT NULL A ...

  8. linux文件实时同步

    参考博客:https://www.cnblogs.com/MacoLee/p/5633650.html 一.文件同步很简单 服务端:被动的接收传输过来的数据 客户端:主动提供数据给服务端 安装思路:服 ...

  9. git 常用命令--超实用

    git命令行常用操作 1.配置ssh key git config --global user.name 'git用户名' git config --global user.email '邮箱地址' ...

  10. Jmeter（10）逻辑控制器

    逻辑控制器可以控制采样器的执行顺序,所以控制器需要和采样器一起使用 Jmeter中的逻辑控制器分为两类 1.控制测试计划执行过程中节点的逻辑顺序,如循环控制器.If控制器 2.对测试计划中的脚本进行分 ...