Custom Select Styles with Pure CSS
- Introduction: This article explores how to create custom select styles with pure CSS, using various techniques and properties such as CSS grid layout, custom CSS variables for flexible styling units, and the removal of the native browser dropdown arrow.
- Common Issues with Native Selects: This section highlights some of the common issues with native selects, such as their initial appearance varying across browsers, and how to overcome these issues by wrapping the native select in an extra div with class of "select" for simplicity in this tutorial.
- Creating the Custom Select Styles: This section provides step-by-step instructions for creating the custom select styles, including setting up width constraints, defining an area and using grid properties to align the elements, and using the adjacent sibling selector to alter the select when it is focused.
- Multiple Select: This section shows how to create styles for multiple select, including removing the arrow and making minor adjustments such as removing padding and allowing text wrapping.
- Disabled Select: Finally, the article explores how to create styles for disabled select, including updating the cursor as an extra hint that the field cannot be interacted with and changing the background values for the disabled state. The resulting appearances are shown in a demo for Firefox, Chrome, and Safari.