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.