Form Field Outlining

Question

I'm trying to remove the blue "halo" outline that form elements have in Firefox on OS X. Using CSS, I can remove the halo in Safari on OS X, via:

input {
  outline: none;
}

But this seems to have no effect in Firefox, nor does the -moz-outline property.

Answer 1

I'm going out on a limb since I don't have OSX to test it... but does removing the border work?

input {
  border: 0;
}

Answer 2

Maybe you have an active user style sheet in your machine creating this behaviour. Some add-ons do this (to make the focus more obvious). Look into the firefox's chome forder (in your user files) Alternatively try with

input {outline: none!important;}

Also

• The Stylish plugin has a style for this, maybe you have it installed?
• There are greasemonkey script that do this. If you have it installed, disable it

They both take precedence over the !important attribute.

So: you have several places to look into * User stylesheets * Stylysh * greasemonkey * anothes add-on

One of those must be forcing the outline

Answer 3

I believe the style of all the form elements are stored in the forms.css file. In OS X, I think it is located here:

/Applications/Firefox.app/Contents/MacOS/res/forms.css

You may want to browse through that file and see if there is any obvious CSS that is affecting the appearance you are seeing. For example, on Windows the input element has -moz-appearance: textfield;, which I couldn't find any documentation on, so perhaps there is some "native" -moz-* style on those fields that is controlling the glow, something you could possibly override.

The other thing to try might be to override everything in that file by changing the input definitions to input2 or something (after making a copy of course). Then you can see if you can get the glow to stop at all by manipulating the default CSS.

Once you've determined you can make it stop (if you can), you can add styles back in a bit at a time until you find the one that causes the effect you don't want. You can probably speed up that process by eliminating styles from your testing that obviously aren't related (e.g. - line-height: normal !important; is almost certainly not responsible for a blue glow around the fields).

Answer 4

I went through the various suggestions made here, but none seemed to be able to fully address the problem. By defining a custom border style, i.e.

border: 1px solid #000;

I'm able to get rid of the focus halo, but this obviously alters the look of the input element. border-style: inset; seems to most closely resemble the "native" look, but it's still not quite right, so as far as I can tell right now, you can either suppress the halo, or have a natural looking input.

Answer 5

I believe this is what you are looking for:

input:focus { outline: none; }