I added some 'letter-spacing' to my 'select' and I noticed that Firefox doesn't change the width of the rendered 'select', meanwhile chromium does.
The result is that the user can't see the entire content of select.
<!DOCTYPE html>
<html>
<head>
<title>select input width with letter-spacing</title>
<style>
select {
appearance: none;
border: none;
letter-spacing: 2px;
}
</style>
</head>
<body>
<select>
<option>hello world</option>
</select>
</body>
</html>Try it with Firefox or Chromium and see the different.
I tried to fix with 'width: max-content' or similar but nothing works.
This shouldn't be happening - I've filed a bug report with Mozilla so hopefully it gets fixed.
https://bugzilla.mozilla.org/show_bug.cgi?id=1851397