Select with size option shows chevron

[bgreay]

What version of @tailwindcss/forms are you using?

0.5.3

What version of Node.js are you using?

16.18.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction repository

https://play.tailwindcss.com/MTlLIvHUfi

Describe your issue

I have a select form element with a size attribute as I want multiple options to display. I do not have the "multiple" attribute as I do not want to allow multiple selections. The chevron appears unless you add the multiple attribute.

[thecrypticace]

I'll see what the consensus is on adding a check for the size attribute. In the meantime you can add this to your own project to mirror the [multiple] reset as long as it's not for size=1 (which looks like a single select)

@layer components {
  [size]:where(:not([size="1"])) {
    background-image: initial;
    background-position: initial;
    background-repeat: unset;
    background-size: initial;
    padding-right: 0.75rem;
    print-color-adjust: unset;
  }
}

Adding it to the components layer + the use of :where allows you to still use utilities to override the background properties.

[bgreay]

That works, thank you Jordan.

[syedzubair925]

How to change chevron icon and customize our svg icon styling?

[reinink]

Hey! We've just merged in #137 which should fix this issue. We'll tag a new release soon, but until then you can test this fix using our insiders release:

npm install @tailwindcss/forms@latest

Thanks for reporting this issue! 🙏