Description
TL;DR - Migration to the relearn theme removed input styles so user agent stylesheets take over. iOS 18.4.1 adds new styles with even more prominent borders due to a11y I assume:
Two things that need to be fixed:
-
The inline-size width for the particular inputs does not work on safari anymore on mobile and expands. The .env-converter should have a max-width: 600px and a width: 100% now.
-
The label could use a clip-path polygon. That was left out for simplicity but the original idea came from:
https://www.beercss.com/#:~:text=Label-,Custom%20inputs,-code. I'd rather remove the floating label nowadays (simplicity + a11y vs. "looks cool") -> https://www.deque.com/blog/accessible-forms-the-problem-with-placeholders/
Description
TL;DR - Migration to the relearn theme removed input styles so user agent stylesheets take over. iOS 18.4.1 adds new styles with even more prominent borders due to a11y I assume:
Two things that need to be fixed:
The inline-size width for the particular inputs does not work on safari anymore on mobile and expands. The
.env-convertershould have amax-width: 600pxand awidth: 100%now.The label could use a clip-path polygon. That was left out for simplicity but the original idea came from:
https://www.beercss.com/#:~:text=Label-,Custom%20inputs,-code. I'd rather remove the floating label nowadays (simplicity + a11y vs. "looks cool") -> https://www.deque.com/blog/accessible-forms-the-problem-with-placeholders/