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 ps-3 pe-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 ps-3 pe-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>