Select

Customize the native select with custom CSS that changes the element’s initial appearance.

Example

                
                  <select class="inline-block w-full leading-5 relative py-3 pl-3 pr-8 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 select-caret appearance-none dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" aria-label="Default select example">
                    <option selected>Open this select menu</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                  </select>
                
              

Note: We use select-caret appearance-none classes for our custom select.

Disabled

                
                  <select class="inline-block w-full leading-5 relative py-3 pl-3 pr-8 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 select-caret appearance-none cursor-not-allowed dark:text-gray-400 dark:bg-gray-600 dark:border-gray-600 dark:focus:border-gray-600" aria-label="Disabled select example" disabled>
                    <option selected>Open this select menu</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                  </select>