88b9f15b65
This PR tweaks the dropdown arrow added to an input by Chrome when it has a `list` attribute pointing to a `<datalist>`. Right now the arrow isn't centered vertically: <img width="227" height="58" alt="Screenshot 2025-07-14 at 15 41 50" src="https://github.com/user-attachments/assets/b354a5e8-432d-432d-bfe4-f7b6f6683548" /> The cause of this is the line height being inherited into the pseudo element which controls how the marker is positioned. I *think* this is because it's being drawn with unicode symbols but I'm not sure. It could just be from the `list-item` display. After this PR changes the line height its centered again: <img width="227" height="58" alt="Screenshot 2025-07-14 at 15 42 05" src="https://github.com/user-attachments/assets/1afa1f33-cc28-4b1f-9e04-e546f6848f57" /> Some notes: This only affects Chrome and also does not appear to cause issues for date/time inputs. While weird that this pseudo is the one used for a `<datalist>` marker it is indeed correct. Fixes #18499 Can use this Play to test the change: https://play.tailwindcss.com/jzT35CRpr0 --------- Co-authored-by: Jonathan Reinink <jonathan@reinink.ca> |
||
|---|---|---|
| .. | ||
| config.test.ts | ||
| index.test.ts | ||
| plugins.test.ts | ||
| standalone.test.ts | ||