Firefox adds 2px extra padding in input text and submit

0
votes

According to the answers below: this is best the solution: .text { line-height: 15px; } input::-moz-focus-inner {border:0; padding:0; margin-top:-1px; margin-bottom:-1px;} Thank you all.

I know that there are some similar questions on Stackoverflow. Because none of the answers works for me, and I have been researching this issue for almost a week but no luck, I decide to post this question. Please help.

Lets say I have a submit button and a text box, Firefox always adds 2px extra padding inside the elements, I tried many solutions I found on the net but none of them works.

Test the code here: https://jsfiddle.net/4f2duwud/7/

HTML:

<form action="http://google.com">
  <input type="submit" class="submit" value="Go to Google">
  <input type="text" class="text">
</form>

CSS:

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  text-decoration: none;
  color: initial;
}
.text {
  padding:3px;
  border: 1px solid gray;
}
.submit {
  padding:3px;
  border:1px solid gray;
}
input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner,
input[type="text"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner { 
  border:0 !important; 
  padding:0 !important;
}

Screenshot - Firefox: enter image description here Screenshot - Chrome: enter image description here

3
htmlcssfirefox
Your problems might be system-specific, provide some screenshots – MoreThanChaos
This is the box model of submit button showing on Firefox: screencast.com/t/V6I20PvuDXo This is the box model of submit button showing on Chrome: screencast.com/t/kqUnSec9e – Louis Tran
Actual screenshots of page itself would be better, browser developer tools might report size differently, On side note you can Edit question itself to provide additional info about question. – MoreThanChaos
I just added 2 screenshots above. Thank you – Louis Tran
Updated it looks good in Firefox, give it a try. – zer00ne

3 Answers

1
votes

Try explicilty setting up the line-height to 15px or 17px or whichever works for you

0
votes

UPDATE

https://jsfiddle.net/Lv1cb2xr/

input::-moz-focus-inner {
    border: 0;
    padding: 0;
    margin-top:-2px;
    line-height: 17px ;
}
0
votes

What worked for me for the text input (Firefox version 86) was setting the background-color:

.text {
  padding: 0px;
  background-color: White
}

Once that's in place then you can set the padding and firefox will respect it.

I don't know why background-color: White works while border: 1px solid gray (as you had in your post) doesn't.

I can reproduce my results in the linked jsfiddle (https://jsfiddle.net/Lv1cb2xr/). Setting border: 1px solid gray in the fiddle does persuade firefox to respect the padding - apparently different to the OP's experience.

It seems like a firefox bug to me, though no doubt if I were to report it then mozilla would tell me it's in the original css spec, therefore they can't do anything about it but hey why don't I consider contributing to the next round of the spec? That's what happened the last time I reported a bug. But I'm not bitter - after all was said and done, it turned out that they were perfectly correct. Wait a minute, No, actually I am still bitter. Why am I still bitter? I don't know, I just am.

The default style seems like it might be copied off the firefox chrome location bar, so maybe there's problems with inappropriately shared code.