点击时去除虚线边框

Question

我正在使用这个CSS来去掉当用户点击超链接时出现的虚线边框

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

这个代码运行良好，但是对于带有背景图片的输入按钮不起作用。

- Shishant

Answer 1

它不能很好地工作。没有鼠标，导航设计变得不可能。

请参见http://24ways.org/2009/dont-lose-your-focus以获得一个合理的折衷方案。

- Quentin

---

这篇文章中提供的解决方案与我使用的相同，但我的问题是它不适用于带有背景图像的输入按钮。 - Shishant

Answer 2

我不该质疑你的设计决策，所以这是你需要的内容。

只需将此添加到您想要去除虚线的任何链接中即可。

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

- user48202

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;
}

- Nick Spiers

Answer 4

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

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

- tahdhaze09