placeholder fully not visible for input type number on firefox when using certain font family

Question

input[type="number"] field does not showing the placeholder text in latest firefox for certain font family like font-family: 'Open Sans';. The current version is Firefox Quantum 57.0.2 (64-bit)

Still don't know some font family have no such issue

Please check on the demo link https://codepen.io/anon/pen/zpqzEB

body {
  padding: 2rem;
}

input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  line-height: 40px;
  background: #fafafa;
  border: 1px solid tomato;
  padding: .5rem 1rem;
  font-family: 'Open Sans';
  background-clip: content-box;
  background-color: deepskyblue;
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<input type="text" placeholder="Text field" />
<hr>
<input type="number" placeholder="Number field" />

Answer 1

It's your border-box property.

I'm not sure why it's happening on CodePen because it looks fine on JSBin and here on StackOverflow in the snippet you posted. Maybe it's CodePen not working great with Quantum.

Anyway, here's what's happening:

The border-box property will make it so the padding and border are included in total width and height of the element (w3schools.com).

Your input height is set to 40px. That 40px has to include the border, padding-top, padding-bottom, and the height of the element itself. Your line-height is also set to 40px. Your padding styles (you have two rules set, so it picks up the second one) is padding: .5rem 1rem;.

There isn't enough room for the input text in these 40 allocated pixels with.

Issue: 40px line height + top padding + bottom padding > 40px

As for a fix, I'm assuming you want to keep your padding and have your inputs the same size. You may need to make your font size smaller or make your inputs larger. 40px isn't enough for the padding and a 40px line height. Or you can remove that border-box property.

It kinda looks to me that the difference between this property on Chrome and on Firefox is that Chrome is ignoring the line-height. In this screenshot on Chrome, the height of the input is 22px, even though your line-height is 22px.

Answer 2

The root cause of the issue is that font-size is in excess of the number input controls.

Your example can be fixed preciesely by using:

padding: 0.46rem 1rem;

---

EXPLAINED

When padding is applied to a number type input the padding is applied to the boundaries of the box in the normal way however in some browsers cropping occurs relative to the amount of padding applied.

The cropping effect is calculated from the inside boundaries of the input arrow controls.

The cropping only affects placeholders because they are behind the input layer and become hidden when the interior boundaries of the input field are moved to cover it.

https://codepen.io/anon/pen/qpZPKd

There are various ways to avoid this however my recommendation is to avoid padding on input elements and to use alternate methods to create the desired effect.

---

Be an illusionist

Personally I don't see any reason to use vertical padding inside input fields. Line-height does a better job.

If you can't make the browsers do what you want make the user think the browser is doing what you want!

body {
  padding: 2rem;
}

.Wrap{
  box-sizing: border-box;
  height: 40px;
  border: 1px solid tomato;
  padding: .5rem 1rem;
}
.Wrap input {
  width: 100%;
  height: 100%;
  line-height: 40px;
  border: none;
  font-family: 'Open Sans';
  background-color: deepskyblue;
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="Wrap"><input type="text" placeholder="Text field" /></div>
<hr>
<div class="Wrap"><input type="number" placeholder="Number field" /></div>

Codepen example https://codepen.io/anon/pen/QaNOdo