去除点击按钮时出现的虚线框

最新推荐文章于 2023-05-16 10:10:33 发布

奈何凡华

最新推荐文章于 2023-05-16 10:10:33 发布

阅读量591

点赞数

本文链接：https://blog.csdn.net/white_with_black/article/details/53291954

版权

最近发现，在点击按钮时会在周围出现虚线边框，这些虚线边框可以更好的看清按钮位置所在，便于浏览。但是有些时候我们却不想使用它们，因为浏览器对虚线框的解析有差异，并且不规则，所以看起来反而成为了某种缺陷。所以这种时候，我们想要禁用这些虚线边框，使页面看起来更美观。

下面介绍去除这些虚线边框的一些方法：

1. outline:none；（较为常用）

优点是代码简洁，使用一行css就能解决问题，但是也有缺点：ie6、ie7并不认识outline属性，需要配合仅ie6和ie7支持的css属性blr:expression_r(this.onFocus=this.blur());使用来达到兼容，expression 条件，这句话的意思是链接在获得焦点的同时失去焦点，但是blr不宜多用，会影响效率。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button class="cart" style="outline:none">
        <img src="../cart.png" alt="购物车的图标"/><a>购物车(0)</a>
    </button>
</body>
</html>

2.hidefocus是ie系列的专有属性，能够作用于所有ie序列的浏览器，需要配合css的outline：none。

也可以写作：hidefocus=”hidefocus”;

缺点是非全局控制，需要在每个需要去虚线边框的按钮上加代码。

3. οnfοcus=”this.blur()”;

优点是比较通用。

缺点也有很多，它也是属于局部控制的手段，需要在每一个需要去虚线边框的标签上使用；

然后这是属于script范畴，对于禁用JavaScript的用户来说不起作用；

将script直接写在html中对于页面效率有负面作用。

该方法需要与border:none;配合使用。