“：focus”伪类在Chrome中不起作用

Question

我正在为我的按钮使用a：focus伪类（按下时）。它在Firefox上工作正常，但它不会改变它在Chrome中的状态。有没有解决方法？

CSS：

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

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

Answer 1

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

  

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

     

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

     

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

您应该将样式更改为：

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

  

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

DEMO

Answer 2

如果你想要一个按钮在点击时获得焦点（铬显然不适合你），你可以手动完成。使用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;