Disposition of HTML-Select having UTF-Icons

Question

Having this HTML

<select>
 <option>🏢Foo</option>
</select>

<select>
 <option>Foo</option>
</select>

The secodn input is dispositioned. How to avoid this effect?

Answer 1

The UTF character is taller than the text, so it is displacing the select box.

I've added a bit of CSS to fix it - vertical-align: middle to line the select boxes up with each other; and line-height: 1.75em to make the character visible.

select {
    vertical-align: middle;
    height: 1.75em;
}

<select>
 <option>🏢Foo</option>
</select>

<select>
 <option>Foo</option>
</select>

Answer 2

Try this.

select {
    display: inline-block;
    vertical-align: middle;
}

<select>
 <option>🏢Foo</option>
</select>

<select>
 <option>Foo</option>
</select>