Trick:如何去掉html标签点击时的蓝色边框

最新推荐文章于 2021-06-15 11:31:17 发布

weixin_30323961

最新推荐文章于 2021-06-15 11:31:17 发布

阅读量213

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gitnull/p/9532102.html

版权

我们在用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"οnfοcus="this.blur()">admin10000.com</a>
　　//使用jquery方法只需一句，非常简单，支持所有浏览器

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

转载于:https://www.cnblogs.com/gitnull/p/9532102.html

weixin_30323961

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Trick:如何去掉html标签点击时的蓝色边框

我们在用html标签时，如input、button、select，img标签时，点击标签经常出现一个蓝色的边框，这个边框真的很low，想要去掉怎么办其实，css有样式可以设置一下，这个问题就轻松解决了，这个问题困扰了我很长时间，因为一直没多大影响所以没处理，就一句样式代码： outline:none;解决图片超链接有蓝边的问题<img sr...
复制链接

扫一扫