Form Select

Transform the native select element with custom CSS to enhance its initial appearance, providing a more visually appealing and user-friendly dropdown experience

A form select is an HTML element that lets users choose one or more options from a dropdown list. It’s commonly used for choosing items like country names, payment methods, or other categorical data. Astral.CSS offers an easy way to customize the appearance of your form selects to create a smoother, more intuitive user experience.

How to Create a Custom Form Select

To give your dropdowns a stylish makeover, simply apply the form-select class. This triggers custom styles that transform the initial appearance of the <select> element, improving its look and feel.

Here’s a basic example of how to create a custom dropdown with Astral.CSS:

Select dropdown
With options
With options
With options
With options
With options
	

Multiple Select Dropdowns

Need users to select multiple options? The multiple attribute allows for a multi-select dropdown.

Select dropdown
With options
With options
With options
With options
With options

Disabling Form Selects

If you want to disable a dropdown (so users can’t interact with it), simply add the disabled attribute.

Select dropdown
With options
With options
With options