CODEWITHSUNDEEP
google-chromecsspseudo-class
catandmouse
catandmouse

Reputation: 11809

":focus" pseudoclass is not working in Chrome

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".)

Upvotes: 3

Views: 11821

Answers (3)

Ayyappan K
Ayyappan K

Reputation: 1186

Try the following:

-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;

Upvotes: -1

John Dvorak
John Dvorak

Reputation: 27277

If you want a button to get focus when clicked (chrome apparently doesn't do that for you), you can do it manually. Using jQuery:

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

Fiddle: http://jsfiddle.net/HSWDc/

Upvotes: 2

Michal Klouda
Michal Klouda

Reputation: 14521

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

Upvotes: 7

Related Questions