bigskysoftware/missing

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-bars.

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.

dz4k commented

pushed a fix for this that should be out in the next release