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.

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>

We can't add padding to the default select arrow. The workaround you can do is use outline property. 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 colour to transparent. Then add outline property and set the colour you want to outline. This will create the same effect that you wanted with border and padding.

Here's the tailwind playground

The "select" elements are complicated to style. For more freedom I would opt for a home made dropdown.

Otherwise there are always some css tricks:

https://play.tailwindcss.com/rOgId32XZx

HTML :

<select class="form-select appearance-none pr-8 pl-2 bg-no-repeat">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

CSS:

  .form-select {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAAABGdBTUEAALGPC/xhBQAAAQtJREFUOBG1lEEOgjAQRalbGj2OG9caOACn4ALGtfEuHACiazceR1PWOH/CNA3aMiTaBDpt/7zPdBKy7M/DCL9pGkvxxVp7KsvyJftL5rZt1865M+Ucq6pyyF3hNcI7Cuu+728QYn/JQA5yKaempxuZmQngOwEaYx55nu+1lQh8GIatMGi+01NwBcEmhxBqK4nAPZJ78K0KKFAJmR3oPp8+Iwgob0Oa6+TLoeCvRx+mTUYf/FVBGTPRwDkfLxnaSrRwcH0FWhNOmrkWYbE2XEicqgSa1J0LQ+aPCuQgZiLnwewbGuz5MGoAhcIkCQcjaTBjMgtXGURMVHC1wcQEy0J+Zlj8bKAnY1/UzDe2dbAVqfXn6wAAAABJRU5ErkJggg==');
    background-size: 0.7rem;
    background-position: right 0.7rem center;
  }