我们在用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. 基于gin的golang web开发：Gin技术拾遗

    本文是对前几篇文章的一些补充,主要包含两部分:单元测试和实际项目中使用路由的小问题. 拾遗1:单元测试 Golang单元测试要求代码文件以_test结尾,单元测试方法以Test开头,参数为*testi ...

  2. 手把手教你使用Rollup打包📦并发布自己的工具库🔧

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...

  3. vue绑定用户页面

    1.vue微博回调空页面 微博回调空页面为: http://127.0.0.1:8888/oauth/callback/ 1.1 页面路径 components\oauth.vue <templ ...

  4. 第11.16节 Python正则元字符“（）”(小括号)与组（group）匹配模式

    一. 什么是组 关于组匹配模式,Python官网上说得比较简单,也没有这个名词,只有组这个名词,老猿查了比较多的资料和做了相关测试之后才理解. 组匹配模式,就是在匹配的正则表达式中使用小括号" ...

  5. PyQt学习问题：Model/View中中EditKeyPressed常量平台编辑键（the platform edit key ）是什么？

    老猿在学习PyQt的Model/View设计时,发现是否允许对视图中的数据项进行编辑的函数setEditTriggers的参数QAbstractItemView.EditTriggers是几个常量的组 ...

  6. Mac下安装Mesa

    下载Mesa源代码: git clone https://gitlab.freedesktop.org/mesa/mesa.git 如果下载太慢,请参看 下载国外资源. 我下载后看到的Mesa版本信息 ...

  7. Hello TLM

    前言 目标 了解TLM程序的基本过程.TLM的英文全称是Transaction Level Modeling,中文翻译为事务级建模.它是在SystemC基础上的一个扩展库. 功能描述 模块A向模块B发 ...

  8. 题解 CF504E 【Misha and LCP on Tree】

    PullShit 倍增和树剖的差距!!! 一个 TLE, 一个 luogu 最优解第三!!! 放个对比图(上面倍增,下面轻重链剖分): 不过这是两只 log 非正解... Solution \(LCP ...

  9. oracle 时间段查询

    <select id="selectByRzrq" resultMap="BaseResultMap" parameterType="java. ...

  10. 将命令行提示符里的执行结果导出到text文件中

    为便于查看和保存命令行提示符里的执行结果, 可以使用 ">" 将执行结果导入到指定.txt文件中. 例如: 在命令行提示符里查看C盘文件,并将结果导入到E盘dir-c-out ...