How to Customize Select Chevron Position with Tailwind CSS

Introduction

By default, the chevron icon in an HTML <select> element appears flush against the right border. This article demonstrates how to reposition the chevron using Tailwind CSS for improved styling and layout customization.

The Problem

In a typical <select> dropdown styled with Tailwind CSS, the default chevron may appear too close to the edge of the dropdown, which can look unpolished. Here’s a basic example:

<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>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</div>

This positions the chevron flush against the dropdown's right border, as the browser's default style applies.

The Solution

Follow these steps to customize the chevron’s position:

Step 1: Use `appearance-none`

The appearance-none utility removes the browser's default styling for the dropdown, including the chevron. You can then fully customize it.

<select class="form-select h-10 w-full appearance-none rounded border border-neutral-300 px-4">
  <option value="none">None</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

Step 2: Add a Custom Chevron

Use Tailwind's bg-no-repeat and bg-position utilities to customize the chevron:

<select
  class="form-select h-10 w-full appearance-none rounded border border-neutral-300 bg-right bg-no-repeat pl-4 pr-8"
>
  <option value="none">None</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

Step 3: Add a Background Image

You can use a base64-encoded image or an SVG for the chevron:

<select
  class="bg-[url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 class=%27feather feather-chevron-down%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E')] form-select h-10 w-full appearance-none rounded border border-neutral-300 bg-right bg-no-repeat pl-4 pr-8"
>
  <option value="none">None</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

This places a custom SVG chevron in the dropdown.

Step 4: Adjust Chevron Position

To move the chevron slightly to the left:

<select
  class="bg-right-2 bg-[url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 class=%27feather feather-chevron-down%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E')] form-select h-10 w-full appearance-none rounded border border-neutral-300 bg-no-repeat pl-4 pr-10"
>
  <option value="none">None</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

Here, bg-right-2 moves the chevron slightly leftward.

Final Code

Here’s the complete example:

<div class="m-8">
  <select
    class="bg-right-2 bg-[url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 class=%27feather feather-chevron-down%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E')] form-select h-10 w-full appearance-none rounded border border-neutral-300 bg-no-repeat pl-4 pr-10"
  >
    <option value="none">None</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</div>

FAQs

Q: Can I use a custom font icon for the chevron? Yes, you can use libraries like Font Awesome or an icon font by applying custom CSS to the background.

Q: How do I align the chevron vertically? Use Tailwind's bg-center or bg-bottom utilities to adjust the vertical alignment.

Q: Can I style the dropdown without removing the default chevron? No, to fully customize the dropdown, you must use appearance-none to remove the default styling.