I am almost exclusively using <a> tags with a class of "btn" for the buttons in my web app.

The problem is that when users use the <tab> key to navigate form fields, there is no way to identify when one of these "buttons" has the focus, which is frustrating them.

I tried adding this to the CSS:

a.btn:active{background-color:red;}

But that doesn't really do what I want; That only changes the background color while the button is being clicked. It doesn't affect how the button appears when the button receives the focus via the <tab> key.

I also tried using :focus instead of :active, but that doesn't really work either.

Does anyone know of a way I could globally change this in my app?

I am almost exclusively using <a> tags with a class of "btn" for the buttons in my web app.

The problem is that when users use the <tab> key to navigate form fields, there is no way to identify when one of these "buttons" has the focus, which is frustrating them.

I tried adding this to the CSS:

a.btn:active{background-color:red;}

But that doesn't really do what I want; That only changes the background color while the button is being clicked. It doesn't affect how the button appears when the button receives the focus via the <tab> key.

I also tried using :focus instead of :active, but that doesn't really work either.

Does anyone know of a way I could globally change this in my app?

• javascript
• jquery
• button
• twitter-bootstrap
• focus

• What are the results when using :active and :focus? Could we see an example? – Charlie Commented Aug 31, 2012 at 23:59
• Why don't you use the tag button? – marc_ferna Commented Aug 31, 2012 at 23:59
• 1 I'm not sure how you code looks, but :focus is the CSS property you're looking for – Slavenko Miljic Commented Sep 1, 2012 at 0:01
• By default BS do style the :focus state (bootstrap.css:2978): .btn:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } – Pavlo Commented Sep 1, 2012 at 10:41

1 Answer 1

:focus is the way to go. Maybe Twitter bootstrap is overriding your :focus styles.

http://jsfiddle/4aVuK/2/

Maybe try to add !important in your css.

a.btn:focus{background-color:red !important;}