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
	   
	   

Customizing the Style of Form Select

For a more tailored design, you can further customize the select menu. For example, you can add rounded corners to give the dropdown a more modern, soft appearance.

		Select dropdown
		With options
		With options
		With options