CODEWITHSUNDEEP
htmlcssfirefoxvertical-alignment
Oskar Persson
Oskar Persson

Reputation: 6753

Vertically align select and number input in firefox

What can I do to have these inputs vertically aligned in Firefox?

It works in Chrome, Safari and Opera but not in Firefox (Version 57 tested in macOS, Windows and Linux Mint). Removing type="number" from the input solves it in Firefox but isn't something I want to remove.

label {
  display: inline-block;
}

.form-control {
  display: block;
}
<body>
  <label>First number <input class="form-control" type="number"></label>
  <label>
    Dropdown
    <select class="form-control">
      <option label="First option" selected="selected">
        First option
      </option>
    </select>
  </label>
</body>

Upvotes: 2

Views: 592

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105893

you need to reset the vertical-align property on your inline-block displayed elements.

label {
  display: inline-block;
  vertical-align: top;
}

.form-control {
  display: block;
}
<body>
  <label>
     First number 
     <input class="form-control" type="number">
  </label>
  <label>
    Dropdown
    <select class="form-control">
      <option label="First option" selected="selected">
        First option
      </option>
    </select>
  </label>
</body>

Upvotes: 3

Related Questions