Question

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?

Answer 1

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

http://jsfiddle.net/4aVuK/2/

Maybe try to add !important in your css.

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