Html Input Field Height Different In Different Browsers

Current Situation On a simple website I have an input control with a fix height where I have a text with a certain font size. I want that text to show up vertically aligned in the

Solution 1:

The issue is caused by the combination of the input field's height attribute in combination with the font. Removing the height properly centers the text inside the input field.

This is probably due to the fact that there are characters that grow beneath the 00:00 baseline, like for example letters p,q,etc, so the vertical center of the font is below the "00:00" vertical center. The font size includes the boundaries that expand on top of the font size. Check the top and bottom bearing lines in the image below:

As a solution I would remove the height and use a font-size that produces a total of the wanted height.

Also as a side-note, a 37px input field also includes 2px of border-size (1px top border and 1px bottom border) so using a 35px font-size would be more appropriate to your example.

Solution 2:

UPDATE

Took @scooterlord's advice about removing height and it fixed 90% of the problem. The 10% was still that 4px offset using iOS which was the same issue with my first solution. The difference is, with height no longer specified, I was able to add 4px padding-top to align iOS and it wasn't pushing the font on the desktop browsers. So basically:

1. Remove height
2. Add padding-top: 4px;

See Snippet 2 and/or CODEPEN

---

OLD

There were some changes that were more for aesthetics than for cross-browser compatibilty of the changes that have significant importance they are denoted with a /* ✎ */. Tested in Chrome, Firefox, Edge and IE. I tried my iPhone 5, but I lost my patience trying to navigate to this page (I have 5 left thumbs 🙃)

IE11SNIPPET 1

html {
  /* ✎ */font: 30016px/1.428"roboto", sans-serif;
  /* ✎ */box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

*,
*::before,
*::after {
  /* ✎ */box-sizing: border-box;
  /* ✎ */margin: 0;
  /* ✎ */padding: 0;
  /* ✎ */border: 0;
}

.meeting-time {
  width: 100px;
  height: 37px;
  text-align: center;
  /* ✎ */font: inherit;
  /* ✎ */font-size: 2.3125rem;
  /* ✎ */line-height: 100%;
  background: yellow;
  /* ✎ */vertical-align: middle;
  -webkit-appearance: none;
}

<linkhref="https://fonts.googleapis.com/css?family=Roboto:300" ><inputtype="text"class="meeting-time"style="-webkit-appearance: none; padding: 0px;"value="00:00" />

SNIPPET 2

html {
  /* ✎ */font: 30016px/1.428"roboto", sans-serif;
  /* ✎ */box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

*,
*::before,
*::after {
  /* ✎ */box-sizing: border-box;
  /* ✎ */margin: 0;
  /* ✎ */padding: 0;
  /* ✎ */border: 0;
}


/* For iOS 🠋🠋🠋BEGIN🠋🠋🠋 *//* ✎ */input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=search] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  box-shadow: none;
}


/* For iOS  🠉🠉🠉END🠉🠉🠉 *//* For demo (optional) 🠋🠋🠋BEGIN🠋🠋🠋 */main {
  height: auto;
  width: 100%;
  padding: 2vh2vw;
}

header {
  display: table;
}

hgroup {
  display: table-row;
}

h5 {
  text-align: right;
  font: inherit;
  font-weight: 700;
  font-size: 1.2rem;
  width: 150px;
}

h6 {
  display: table-cell;
  width: 100px;
  font: inherit;
}

hr {
  height: 0;
  margin: 1.25em auto;
  border: 0 none transparent;
  border-bottom: 1px solid #000;
}

hr:nth-of-type(even) {
  border-bottom: 1px dashed #000;
}


/* For demo (optional) 🠉🠉🠉END🠉🠉🠉 *//* Example 1 */.ex1Time {
  width: 100px;
  height: 37px;
  text-align: center;
  font: inherit;
  font-size: 37px;
  background: yellow;
}


/* Example 2 */.ex2Time {
  width: 5ch;
  text-align: center;
  font: inherit;
  font-size: 2.3125rem;
  background: yellow;
  padding-top: 4px;
}


/* Example 3 */.ex3Time {
  width: 5ch;
  text-align: center;
  font-family: Arial;
  font-size: 2.3125rem;
  background: yellow;
  padding-top: 4px;
}

<linkhref='https://fonts.googleapis.com/css?family=Roboto:300'rel=''><main><hr/><header><hgroup><h6>Original Code</h6><h5>Example 1</h5></hgroup></header><hr/><inputtype="text"class="ex1Time"value="00:00"><inputtype="text"class="ex1Time"value="07:22"><inputtype="text"class="ex1Time"value="11:11"><inputtype="text"class="ex1Time"value="12:34"><hr/><header><hgroup><h6style='display:table-row'>Font dependent lengths are measured in ch units</h6><h6style='display:table-row;width:400px'>4 inputs Within .ex2Align</h6><h6>&nbsp;</h6><h5>Example 2</h5></hgroup></header><hr/><inputtype="text"class="ex2Time"value="00:00"><inputtype="text"class="ex2Time"value="07:22"><inputtype="text"class="ex2Time"value="11:11"><inputtype="text"class="ex2Time"value="12:34"><hr/><header><hgroup><h6style='display:table-row'>Using Arial instead of Roboto</h6><h6style='display:table-row;width:400px'>4 inputs Within .ex3Align</h6><h6>&nbsp;</h6><h5>Example 3</h5></hgroup></header><hr/><inputtype="text"class="ex3Time"value="00:00"><inputtype="text"class="ex3Time"value="07:22"><inputtype="text"class="ex3Time"value="11:11"><inputtype="text"class="ex3Time"value="12:34"><hr/></main>

Solution 3:

Have you tried using line-height?

.meeting-time {
    margin: 0;
    padding: 0;
    width: 100px;
    height: 37px;
    line-height:37px;
    text-align: center;
    font-family: "roboto",sans-serif;
    font-style: normal;
    font-size: 37px;    
    font-weight: 300;
    background: yellow;
    vertical-align: middle;
    -webkit-appearance: none;
    }

<inputtype="text"class="meeting-time"style="-webkit-appearance: none; padding: 0px; inn"value="00:00"/>

I added line-height to your CSS. Try the above and see how it goes.