CODEWITHSUNDEEP
htmlcssfirefox
AGD
AGD

Reputation: 515

Text input and submit input elements have different height in firefox

The code:

<input class="text" type="text" value="text"><input class="submit" type="submit" value="submit">

with styling:

.text, .submit {
    outline: none;
    border: none;
    padding: none;
    margin: none;
    background: red;
    padding: 3px;
    box-sizing:border-box;
}

(https://jsfiddle.net/citizenfive/04camn42/)

creates 2 input elements with different heights (submit is larger by ~1px).

The code works fine on Chrome. Is there a way to solve this for Firefox?

Upvotes: 0

Views: 402

Answers (4)

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

All browsers have differences between default behaviours and styles, but firefox is more flexible with S.O. and form elements are controlled by default by the operating system.

The solution is remove padding or use height with EM meassures.

Remove padding:

https://jsfiddle.net/04camn42/2/

 .class { padding: 0 }

Using EM height:

https://jsfiddle.net/04camn42/3/

 .class {
     height: 1.5em
 }

IF you use EM you don't worry about responsiveness and user choices.

Upvotes: 2

Marco Hengstenberg
Marco Hengstenberg

Reputation: 864

In order to remove all padding and borders from buttons and inputs for Firefox this handy little CSS snippet will help you out.

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

Also, what's been suggested by the other posters: use box-sizing: border-box; on all form elements to make them behave in all browsers (apart from Firefox).

Upvotes: 0

Reshma Reghunatha Panicker
Reshma Reghunatha Panicker

Reputation: 1121

Removed padding and added height, this works fine in Chrome and Firefox but I don't know whether this fix is fine for you.

New css,

.text, .submit {
  outline: none;
  border: none;
  padding: none;
  margin: none;
  background: red;
  /* padding: 3px; */
  box-sizing: border-box;
  height: 23px;
}

Upvotes: 0

Domain
Domain

Reputation: 11808

.text, .submit {
    outline: none;
    border: none;
    padding: none;
    margin: none;
    background: red;
    padding: 3px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

see in i

Upvotes: -1

Related Questions