HTML input field height varies across browsers

Question

Current situation

On a simple website, I have an input control with a patch height where I have text with a specific font size. I want the text to be displayed vertically in the middle of the input field. But even if I used reset css (link here ) and the installation -webkit-appearancein noneis still not centered.

You can see that for IE the addition at the top is higher, for iOS it is even worse. There are 12 more pixels.

Some code

HTML:

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

CSS

.meeting-time {
    margin: 0;
    padding: 0;
    width: 100px;
    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;
}

Actual question

How can I get a text box where the text is aligned vertically for all browsers.

I know this has been asked a couple of times, but the proposed solutions have not worked so far. This is probably something trivial that I miss.

Answer 1

UPDATE

@scooterlord 90% . 10% , 4px iOS, . , , , 4px padding-top iOS, . , :

• padding-top: 4px;

. 2 / CODEPEN

---

OLD

, , - , , /* ✎ */. Chrome, Firefox, Edge IE. iPhone 5, , ( 5 )

IE11 SNIPPET 1

html {
  /* ✎ */
  font: 300 16px/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;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">


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

Hide result

SNIPPET 2

html {
  /* ✎ */
  font: 300 16px/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: 2vh 2vw;
}

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;
}

<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet'>

<main>

  <hr/>
  <header>
    <hgroup>
      <h6>Original Code</h6>
      <h5>Example 1</h5>
    </hgroup>
  </header>
  <hr/>

  <input type="text" class="ex1Time" value="00:00">

  <input type="text" class="ex1Time" value="07:22">

  <input type="text" class="ex1Time" value="11:11">

  <input type="text" class="ex1Time" value="12:34">

  <hr/>
  <header>
    <hgroup>
      <h6 style='display:table-row'>Font dependent lengths are measured in ch units</h6>
      <h6 style='display:table-row;width:400px'>4 inputs Within .ex2Align</h6>
      <h6>&nbsp;</h6>
      <h5>Example 2</h5>
    </hgroup>
  </header>
  <hr/>


  <input type="text" class="ex2Time" value="00:00">

  <input type="text" class="ex2Time" value="07:22">

  <input type="text" class="ex2Time" value="11:11">

  <input type="text" class="ex2Time" value="12:34">


  <hr/>
  <header>
    <hgroup>
      <h6 style='display:table-row'>Using Arial instead of Roboto</h6>
      <h6 style='display:table-row;width:400px'>4 inputs Within .ex3Align</h6>
      <h6>&nbsp;</h6>
      <h5>Example 3</h5>
    </hgroup>
  </header>
  <hr/>


  <input type="text" class="ex3Time" value="00:00">

  <input type="text" class="ex3Time" value="07:22">

  <input type="text" class="ex3Time" value="11:11">

  <input type="text" class="ex3Time" value="12:34">


  <hr/>
</main>

Hide result

Answer 2

height . height .

, , , , 00:00, , p, q .., "00:00", , . :

, .

, , 37px 2px ( 1px 1px), 35px .

Answer 3

?

.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;
    }

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

Hide result

- CSS. , .

Answer 4

Remove the height and use a spacer instead, but with ems