我们在用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. SpringBoot集成FastDFS依赖实现文件上传

    前言 对FastDFS文件系统安装后的使用. FastDFS的安装请参考这篇:Docker中搭建FastDFS文件系统(多图) 本文环境:IDEA + JDK1.8 + Maven 本文项目代码:ht ...

  2. Spring Cloud 学习 (二) Ribbon

    负载均衡是指将负载分摊到多个执行单元上,常见的负载均衡有两种方式:一种是独立进程单元,通过负载均衡策略,将请求转发到不同的执行单元上,例如 Ngnix:另一种是将负载均衡逻辑以代码的形式封装到服务消费 ...

  3. paddleocr安装笔记

    下载解压安装 wget http://npm.taobao.org/mirrors/python/3.7.6/Python-3.7.6.tgztar xvf Python-3.7.6.tgzcd Py ...

  4. Aap.Net中的Action和Func委托

    前言 最近在阅读某开源框架源码的时候,发现作者在其中运用了很多Action委托和Func委托,虽然我之前在项目中也有一些对委托的实操,但还是免不了长时间的不用,当初消化的一些委托基础都遗忘了...索性 ...

  5. 懒松鼠Flink-Boot(Flink+Spring):一款将Flink与Spring生态完美融合的脚手架工程

    目录 你可能面临如下苦恼: 接口缓存 重试机制 Bean校验 等等...... 它为流计算开发工程师解决了 有了它你的代码就像这样子: 仓库地址:懒松鼠Flink-Boot 1. 组织结构 2. 技术 ...

  6. Canal监听mysql

    安装mysql5.7,并开启binlog 安装mysql 开启binlog find / -name my.cnf 找到这个文件 添加几行 [mysqld] log-bin=mysql-bin # 开 ...

  7. Salesforce LWC学习(二十八) 复制内容到系统剪贴板(clipboard)

    本篇参考: https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipb ...

  8. 四、Jmeter安装插件

    Jmeter安装插件方法和使用 1-下载Jmeter管理jar包 下载地址:https://jmeter-plugins.org/install/Install/ 2-点击下载 plugins-man ...

  9. 【Azure Redis 缓存】Azure Redis 服务不支持指令CONFIG

    问题描述 在Azure Redis的门户页面中,通过Redis Console连接到Redis后,想通过CONFIG命令来配置Redis,但是系统提示CONFIG命令不能用. 错误消息为:(error ...

  10. JeecgBoot table 渲染图片

    使用jeecgboot框架,在table列表显示图片 使用Column 的customRender属性 通过以上设置,就会在列表页显示图片了