CSS去掉A标识(连接)虚线框的方式

2021-01-20 09:45 jianzhan

当1个连接获得聚焦点时,默认设置会有个虚线框。如图:

在 Firefox 里能够用 -moz-outline:none; 或 outline:none; 来将其去掉。因此大家能够这样写:

拷贝编码
编码以下:
a:focus {
outline:none;
-moz-outline:none;
}

顺带提1下,假如你用过 Safari 和 Chrome 将会会发现,当键入框获得聚焦点时边框会出現黑影实际效果。

假如想去掉黑影实际效果还可以用 outline 特性。

拷贝编码
编码以下:
input,textarea {
outline:none;
}

言归正传,不久说的是 Firefox ,如今说说 IE。最先较为遗憾,都还没寻找根据 CSS 去掉 IE 连接虚线框较为好的处理方法。因此只能用1个取代的方法,便是 a 标识的 hidefocus 特性(这个特性是 IE 特有的)。


拷贝编码
编码以下:
<a href="#" hidefocus="true">连接</a>

留意:JS 脚本制作对应的特性名是:hideFocus。对应的 JS 编码应当是:

拷贝编码
编码以下:
xxx.hideFocus ="true";

也有1种不强烈推荐的方法。便是让连接获得聚焦点的情况下丧失聚焦点。

拷贝编码
编码以下:
<a href="#" onfocus="this.blur();">连接</a>

这类方法很有用,但过度暴力行为,最好是不必用了。