Search code examples
htmlcssselecttailwind-css

How to change position of chevron on <select> with Tailwind?

I have a classic select input which receive an array of strings.

Problem, the chevron is on absolute right of the select, against the border.
example

I want to move its poition to the left a little.

How to achieve that with tailwind ?

Here is a Tailwind playground

Here is the code :

<div class="m-8">
  <select class="h-10 w-full rounded border border-solid border-neutral-300 px-4 text-sm">
    <option value="none">None</option>
    {list?.map((item) => (
    <option key="{item}" value="{item}">{item}</option>
    ))}
  </select>
</div>
Solution

  • We can't add padding to the default select arrow. The workaround you can do is use border property as padding, and the 'outline' property as colored border. You can achieve is using following code.

    <div class="m-8">
  <select class="h-10 w-full rounded border-r-8 border-transparent px-4 text-sm outline outline-neutral-700">
    <option value="none">Non précisé</option>
    {list?.map((item) => (
    <option key="{item}" value="{item}">{item}</option>
    ))}
  </select>
</div>

    Here, we are giving border to just the right side and setting it to 8px of width. This will work as a padding after we add the outline. Don't forget to set border color to transparent. Then add outline property and set the color you want to outline. This will create the same effect that you wanted with border and padding.

    Here's the tailwind playground