Luke Warlow 307ee6a1c5 layout: Paint the <select> chevon using an SVG (#43175) ...

Previously there were two issues:

1. The select chevron had a 4px margin which should have just applied to
the inline axis.
2. The chevron character had odd font metrics, so even once the margin
is fixed the select is still too tall.

This is fixed by using an SVG as a background-image instead of using the
▾ character.

Testing: Tested with https://demo.lukewarlow.dev/css-forms.html (and the
test case added in https://github.com/servo/servo/pull/42085).

| Before | After |
| ------|------|
| <img width="522" height="267" alt="image"
src="https://github.com/user-attachments/assets/7cc2d840-3384-4a6c-8945-0277cfb4096d"
/> | <img width="509" height="250" alt="image"
src="https://github.com/user-attachments/assets/99742dca-3ce6-4964-98bd-0cdbf3e14937"
/> |

---------

Signed-off-by: Luke Warlow <lwarlow@igalia.com>

2026-03-11 13:56:32 +00:00

32 KiB

Raw Blame History

View Raw