selectstyledbeginner

Select Dropdown

A styled select dropdown with custom arrow icon and consistent cross-browser appearance.

Preview

<div class="relative w-72">
  <select class="w-full appearance-none px-4 py-3 pr-10 bg-white border border-gray-300 rounded-lg text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent cursor-pointer">
    <option>Select a framework</option>
    <option>React</option>
    <option>Vue</option>
    <option>Angular</option>
    <option>Svelte</option>
  </select>
  <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</div>

Color Breakdown

Background

bg-white

#ffffff

Border

border-gray-300

#d1d5db

Text

text-gray-900

#111827

Arrow

text-gray-400

#9ca3af

Focus Ring

focus:ring-blue-500

#3b82f6

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-gray-800 dark:border-gray-600 dark:text-white

Use Cases

Filter dropdownsForm selectsSettings preferences

Browser Support

All modern browsers. appearance: none removes default browser styling.

Related Recipes

Split Button

button - intermediate

Newsletter Section

section - beginner

Mega Menu Header

nav - advanced

Floating Label Input

input - intermediate

Gradient Form

form - intermediate

Dark Form

form - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

Why use appearance-none?▼

It removes the default browser select styling (the native arrow) so you can add a custom SVG arrow icon with consistent styling across browsers.