Question

我正在使用此CSS删除点击超链接时出现的虚线边框

a:active, a:focus, input {
    outline: 0;
    outline-style:none;
    outline-width:0;
}

这样可以正常工作，但对具有背景图像的输入按钮不起作用。

Answer 1

工作不正常。没有鼠标就无法导航设计。

请参阅http://24ways.org/2009/dont-lose-your-focus以获得合理的妥协。

Answer 2

这不是我对你的设计决定提出质疑的地方，所以你走了。

只需将此添加到您要删除虚线的任何链接

onfocus="if(this.blur)this.blur()"

Answer 3

您可以添加onclick: blur();，以便让它保持标签快乐，并且在点击时不会破坏设计。

但是为了记录，这似乎跨浏览器工作。 IE的第一部分，FF的第二部分：

input, input:active, input:focus{
    outline: 0;
    outline-style:none;
    outline-width:0;
}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
}

Answer 4

您需要使用类来区分哪些链接具有虚线边框，哪些链接没有。使用img选择器是不够的。

将输入标签设置为没有虚线边框;如果您有多种样式（清除，提交，取消等），您甚至可以使用类作为输入按钮

单击时删除虚线边框

4 个答案: