Form fields and inherited line-height
Closed this issue · 2 comments
It appears that <input>
, <select>
, e.g., all have line-height: inherit
which by default inherits from html {line-height: var(--rhythm)}
, where I think the default value for --rhythm
is 1.4rem.
However, it seems like (at least in Firefox?) <select>
elements do not honor line-height
, and so as a result the <input>
field is "taller" than a normal <select>
, which looks bad in e.g. .tool-bar
s.
I'm happy to attempt a PR if we can think of an appropriate way forward.
After learning a little more about this, it seems that <select>
are "replaced elements" and not necessarily subject to line-height
. It seems that having a --rhythm
larger than 1rem
means that inputs
and selects
will be different heights, at least in Firefox for Windows 11.
pushed a fix for this that should be out in the next release