":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,请参阅文档.

所述:focus选择器用于选择具有焦点的元件.

该:active选择器用于选择和风格的活动链接.

单击链接后,链接将变为活动状态.

您应该将样式更改为:

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

Note: :active MUST come after :hover (if present) in the CSS definition in order to be effective!

DEMO