":focus" pseudoclass is not working in Chrome

Question

I am using a :focus pseudo-class for my buttons (when pressed). It works fine on Firefox but it doesn't change its state in Chrome. Is there any workaround?

CSS:

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

(It's an input tag with a class "btn".)

Answer 1

You need to distinguish between :focus and :active, see documentation.

The :focus selector is used to select the element that has focus.

The :active selector is used to select and style the active link.

A link becomes active when you click on it.

You should change your styles to:

.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