Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Form fields and inherited line-height #50

Open
geoffrey-eisenbarth opened this issue May 8, 2024 · 1 comment
Open

Form fields and inherited line-height #50

geoffrey-eisenbarth opened this issue May 8, 2024 · 1 comment

Comments

@geoffrey-eisenbarth
Copy link
Sponsor

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.

@geoffrey-eisenbarth
Copy link
Sponsor Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant