Nsryjdtyk

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 =)

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

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.

input {border:0; outline:none;}

should remove all borders/outlines.

The answer is simpler than I reliased:

box-shadow:none;

Edit: my solution was way to complicated. It's simple as that:

input:focus {

  outline: none;

}

You need to target the :focus state.

To remove the highlight try adding this rule to the input field(s):

-moz-appearance:none;

This can also be done for WebKit based browsers using the respective prefix:

-webkit-appearance:none;

This should take care of any borders, outline, etc. using just one CSS property.
For browsers other than the WebKit pair and Firefox - Opera and IE - it's advisable to include border and outline properties too, ensuring browser cross-compatibility.

button {

    -webkit-tap-highlight-color:transparent;

    -moz-tap-highlight-color:transparent;

    -o-tap-highlight-color:transparent;

    tap-highlight-color:transparent;

}