Firefox adds 2px extra padding in input text and submit

Question

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: Screenshot - Chrome:

Answer 1

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

Answer 2

UPDATE

https://jsfiddle.net/Lv1cb2xr/

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

Answer 3

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.