Question 161262 in Html Question posted in
Some basic documentation can be found here.

How can I change the position of the chevron on a <select> element using 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>
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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:

    <div class="relative table">
  <div class="absolute right-2 after:content-['⌄']"></div>
  <select class="appearance-none">
    <option>Yes</option>
    <option>No</option>
    <option>Maybe</option>
  </select>
</div>

    https://play.tailwindcss.com/YsqkNDblz7

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search