CSS - Removing input field active highlight

Question

Using only html and css, how do I disable the blue (in Firefox) highlight color around an active input field. I've tried using input {outline:none;} but with no success. Thanks for the help! =)

ok,ignoring the previous code about outline, I chose the wrong property to change. What I'm trying to get is to simply remove the highlighting (whatever browser, its the bold and colored border that appears) around an active form input field, without changing or disabling the styling. Thanks =)

Answer 1

You have to use :focus declaration. In this case:

input:focus {outline:none;} 

All the input's in your project won't have the blue border.

If you want a specific attribute, use this:

input[type=text]:focus {outline:none;} 

Hope it helps. =)

Answer 2

See this fiddle.

It seems that you have to set some border property to make outline: none work. If you comment in the border directive, the outline disappears.

Answer 3

input {border:0; outline:none;}

should remove all borders/outlines.