google-chrome - ":focus" 伪类在 Chrome 中不起作用

Question

我正在为我的按钮使用 :focus 伪类（按下时）。它在 Firefox 上运行良好，但在 Chrome 中不会改变其状态。有什么解决方法吗？

CSS：

.btn:focus {
    box-shadow: 1px 1px 1px #586601 inset;
    text-shadow: -1px -1px 1px #000000;
}

（这是一个带有“btn”类的输入标签。）

Answer 1

您需要区分:focus和:active，请参阅文档。

选择:focus器用于选择具有焦点的元素。

选择:active器用于选择活动链接并为其设置样式。

单击链接时，链接将变为活动状态。

您应该将样式更改为：

.btn:active, .btn:focus {
   box-shadow: 1px 1px 1px #586601 inset;
   text-shadow: -1px -1px 1px #000000;
}

注意：:active必须:hover在 CSS 定义之后（如果存在）才能生效！

演示

Answer 2

如果您希望按钮在单击时获得焦点（chrome 显然不会为您做到这一点），您可以手动完成。使用 jQuery：

$(".btn").on("click",function(){
  $(this).focus()
}

小提琴：http: //jsfiddle.net/HSWDc/

Answer 3

尝试以下操作：

-webkit-box-shadow: 1px 1px 1px #586601 inset;
-moz-box-shadow: 1px 1px 1px #586601 inset;
-webkit-text-shadow: -1px -1px 1px #000000;
-moz-text-shadow: -1px -1px 1px #000000;