How to reset default button style in Firefox 4 +
Solution 1
I actually found the solution myself.
In your url field type: resource://gre-resources/forms.css
- this will open forms.css for FF4 - and search for the following selector
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner
Now just put that in your main stylesheet like:
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {border:0;padding:0;margin:0;}
It shouldn't be overriding your css anymore. Also note that if you haven't defined any font style for your inputs FF won't inherit body font styling.
Solution 2
try setting it's values to undefined (border:undefined
etc). not sure here, but it worked for me when I had a similiar problem.
Solution 3
Twitter Bootstrap does it like this in its reset.less
(which is a more barebones version of normalize.css
):
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
padding: 0;
border: 0;
}
As an aside, Bootstrap's reset.less
is probably a more reliable and perennial solution to achieve form cross-browser-ness than maintaining your own rules. It's much more complete than Meyer's reset.css
, but more minimalist than normalize.css
.
Comments
-
easwee almost 2 years
In firefox 3.6 you could use
::-moz-focus-inner {border:0;padding:0;margin:0;}
to remove those default margins and paddingsforms.css
added.How can I reset this in Firefox 4? I've been searching for any .css files inside the install directory that could add styles to my button but can't find any for ff4 - the button still gets that annoying 1px top padding that won't allow the text to align to vertical middle.
http://easwee.net/other/FF_problem.gif
EDIT: I use a reset stylesheet so no need to reset styles. It's a browser stylesheet that's messing here.
-
easwee about 13 yearsNo it won't. I'm using a reset stylesheet. Read the question again to get what I'm reffering to.
-
caleb marincel about 13 yearsyes but even if you find that css file in firefox the change will still only apply to you and nobody else
-
easwee about 13 yearsIt will apply to everyone once I find which selector is adding that and I override it with a more specified selector in my main stylesheet. It always worked in all FF versions till now.
-
caleb marincel about 13 yearsoh yes I see. Well looks like you found it :)
-
easwee about 13 yearsYeah - maybe my question was bit unclear - edited few words for future if anyone searches for this.
-
Admin over 12 yearsThank you. Sadly, finding those css resource files is no longer applicable in Firefox 6; however, this resolved my issue still.
-
easwee over 12 years@PatrickRobertSheaO'Connor In ff6 it got changed to
resource://gre-resources/html.css
-
Gabriele Petrioli over 12 years+1 so many thanks... it was too frustrating trying to figure out the persistent border..
-
Damir Zekić about 12 yearsThanks, was burned by this myself. A minor note though: margin:0 seems unnecessary as Firefox doesn't define it itself.
-
easwee about 12 years@Damir Zekić Maybe in latest versions - in older it is needed.
-
julien_c about 12 yearsA year later, I would suggest to have a look at Bootstrap's
reset.less
which goes a long way towards harmonizing browser quirks for forms. Also see my answer below. -
Sam Hobbs over 5 yearsIn the Developer Tools in the Inspector in the Computed tab it shows the style being affected and has a link for opening the forms.css file. I found this question by searching for "resource://gre-resources/forms.css".