I created a form where <input> and <select> are used. I want them to inherit the line height, it works fine on the input element. On the select element the line height is inherited from something else.
Chrome DevTool shows that the line height is equal everywhere (1.5) and is being inherited. The select element inherits as well, but gets a normal value insted of 1.5 as every other element.
If I explicitly set the line height on that element everything works fine.
body {
font-size: 1rem;
line-height: 1.5;
}
select,
input {
font: inherit;
padding: 0.375rem 0.75rem;
}
.comparison>* {
position: absolute;
background-color: transparent;
}
.c1 {
color: red;
}
.c2 {
color: blue;
}<label for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
<option value="dog" selected>Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
<br />
<br />
<label for="name">Name your pet:</label>
<input id="name" type="text" value="Frensky">
<br />
<br />
<div class="comparison">
<select class="c1" name="pets">
<option value="dog" selected>Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
<input class="c2" type="text" value="Frensky">
</div>