0Pricing
Tailwind CSS Academy · Lesson

Select Menus and Checkboxes

Style native select dropdowns and checkboxes, and use the @tailwindcss/forms plugin to normalize cross-browser form styling.

The Challenge With Native Form Controls

Native <select>, <checkbox>, and <radio> elements are notoriously difficult to style consistently across browsers. By default, they inherit the operating system's appearance using the appearance CSS property, which Tailwind resets with the appearance-none utility.

After removing the native appearance, you regain full control over styling. The @tailwindcss/forms plugin automates this reset for all form elements, giving you a clean cross-browser baseline without manually adding appearance-none everywhere.

<!-- Without plugin: manual appearance reset needed -->
<select class="appearance-none w-full px-3 py-2 border border-gray-300 rounded-lg">
  <option>Option A</option>
</select>

<!-- With @tailwindcss/forms plugin: already normalized -->
<select class="w-full px-3 py-2 border border-gray-300 rounded-lg">
  <option>Option A</option>
</select>

Styling a Select Dropdown

A styled select uses the same base classes as a text input: w-full px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white. Add a custom dropdown arrow by positioning a background SVG image or overlaying an absolutely positioned SVG icon.

The focus state uses the familiar focus:outline-none focus:ring-2 focus:ring-blue-500. Add cursor-pointer so the mouse cursor communicates that clicking opens a menu.

<div class="relative">
  <select
    class="w-full appearance-none px-3 py-2 text-sm text-gray-900 bg-white
           border border-gray-300 rounded-lg cursor-pointer
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="de">Germany</option>
  </select>
  <!-- Custom dropdown arrow -->
  <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
    <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
    </svg>
  </div>
</div>

All lessons in this course

  1. Styling Text Inputs and Textareas
  2. Select Menus and Checkboxes
  3. Form Layout Patterns
  4. Validation and Error States
← Back to Tailwind CSS Academy