【问题标题】：Firefox: CSS: change style when button focusedFirefox：CSS：按钮聚焦时更改样式
【发布时间】：2011-04-12 14:54:30
【问题描述】：
可以remove the extra Firefox-specific spacing from <button> tags。唯一的缺点是当您聚焦到键盘上的按钮时，轮廓会丢失。
我非常想让我的按钮在 Chrome、IE8、Firefox 中保持一致。如果我可以使用 CSS :hover，我可以使用删除 Firefox 间距和轮廓的相同样式轻松地将按钮显示为焦点。
有没有什么方法可以在没有 JavaScript 的情况下做到这一点？我不在乎其他浏览器是否忽略该规则。事实上，如果有这样的事情，我更喜欢:-moz-focused，所以我可以确定它不会在其他浏览器中发生。
另外，如果可以在 Firefox 中实现 Chrome 风格的外发光，那将是两倍。
【问题讨论】：
标签：
css
firefox
button
focus
【解决方案1】：
事实上，有一个:focus 选择器。这不是你需要的吗？
a:hover, a:active, a:focus {
border: 1px dotted #f00;
}
我已经完成了这项工作并取得了相当不错的结果，尽管通过点击和标签的正确组合可能会导致多个元素突出显示（一个活动的和另一个集中的）。虽然您可能会考虑悬停/活动和焦点之间的视觉区别，但在正常使用中不太可能成为问题。
另请注意，IE8 和 9 支持 :focus，但早期版本不支持。 （quirksmode.org 上的图表似乎表明它在 8 中不起作用，但测试表明并非如此。）
【解决方案2】：
为此，CSS 有 :focus 选择器，其工作方式类似于 :hover，但适用于具有焦点的元素。似乎没有特定于 Firefox 的版本。