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

The Solutions:

Solution 1: Using outline property

To change the position of the chevron on a select element with Tailwind, you can use the outline property. The outline property creates a border around the element, which can be used to create the illusion of a chevron. To do this, you can add the following code to your select element:

outline: 1px solid #000;

This will create a 1px wide black border around the select element. You can then use the `outline-offset` property to move the border to the left or right. For example, the following code will move the border 5px to the left:

outline-offset: -5px;

You can also use the `outline-width` property to change the width of the border. For example, the following code will create a 2px wide border:

outline-width: 2px;

By combining these properties, you can create a chevron that is positioned to the left or right of the select element.

Solution 2: CSS tricks

This solution involves applying CSS tricks to manipulate the appearance of the <select> element and move the chevron to the left.

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;
}

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>

Here, the CSS tricks are used to:

Set the background-image property to a transparent PNG image with the desired chevron icon.
Set the background-size property to adjust the size of the chevron icon.
Set the background-position property to position the chevron icon at the right with a slight offset to the left.

Q&A