Invalid padding for <select> in Firefox

[emilsundberg]

What version of @tailwindcss/forms are you using?

v0.5.2

What version of Node.js are you using?

v14.16.1

What browser are you using?

Firefox 101

What operating system are you using?

macOS

Reproduction repository

https://tailwindcss-forms.vercel.app/

Describe your issue

It seems like Firefox is adding its own custom padding to <select> which can be seen by looking at https://tailwindcss-forms.vercel.app/ using Firefox 101.

Firefox

Chrome

Looking in Bugzilla there seems to be a bug report for this issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1582545

This can be solved by adding Gecko specific code:

@-moz-document url-prefix() {
    select {
        padding-left: 12px !important;
    }
}

Note: 12px is just an example that makes it work on my app

---

It these kind of hacks out of scope for the forms plugin?

[adamwathan]

Hey! Yeah unfortunately I think this is just a browser inconsistency that is best to just live with as far as the internals of this plugin are concerned anyways. I did some looking around and it doesn't look like any other CSS frameworks account for this inconsistency either, which makes me nervous to make changes as there might be unintended consequences. I can't seem to track down what's causing it exactly but it seems like some sort of extra padding on some Firefox specific shadow DOM element, I just can't figure out how to get Firefox to actually show me the shadow DOM for a <select> element in dev tools.

If it helps, I can't find any websites that appear to compensate for this, not even Stripe who are typically super detail oriented with their UI:

So going to close this as something we don't plan to look into I'm afraid but thanks for raising it, learned something new.