The <select> element

The <select> element gives a menu of options for a user and is implemented by the DOM HTMLSelectElementInterface. You can add the <multiple> attributes to the select element and add multiple options. The examples in this section use HTML, CSS, and JavasScript to customize <select> styles.

Styling with CSS

The <select> element is notoriously difficult to style productively with CSS. You can affect certain aspects like any element - for example, manipulating the box model, the displayed font, etc., and you can use the appearance property to remove the default system appearance.

However, these properties don't produce a consistent result across browsers, and it is hard to line different types of form elements up with one another in a column. The <select> element's internal structure is complex and hard to control. If you want full control, you should consider using a library with good facilities for styling form widgets or try rolling your dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics.