How to remove the caret in the select input?

[skiopey]

What version of @tailwindcss/forms are you using?

0.5.7

What version of Node.js are you using?

21.6.0

What browser are you using?

chrome

What operating system are you using?

win10

Reproduction repository

none

Describe your issue

Since we can't customize the caret in the select input, how can i remove it? Honestly, it would be great just to remove the caret from the select input in this plugin, cuz we can just add a custom caret.

thanks.

[adamwathan]

Hey! Two ways —

One option is to use the bg-none class to remove the background image on a per-element basis:

<select class="bg-none">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Another is to remove it for all select elements in your CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  select {
    background-image: none;
  }
}

The second option is what I would do if you want to use a custom caret every single time 👍 Hope that helps!