A <select> lets users choose from a list of options. In a contact form, shared CSS can bring it closer to the look of text inputs and textareas, though operating-system styling limits how far the menu can be customized. section 10.0 section 10.4
Useful styling steps include:
- Add select to existing form-control rules to share typography, color, border, padding, and width. section 10.3.2
- Set the background to the card color so the control follows the form’s theme. section 10.4
- Use a pointer cursor on hover to signal that the menu is clickable. section 10.9.2
CSS alone cannot fully restyle the options menu because its appearance and behavior partly come from the operating system. Replacing the native control with JavaScript and ARIA means recreating its accessibility information and functionality as well as its appearance. section 10.4
Listing 10.15 Default styles applied to select
input:not([type="radio"], [type="checkbox"]),
textarea,
select {
font-size: 1rem;
font-family: inherit;
color: inherit;
border: none;
border-bottom: solid 1px var(--primary);
border-image: linear-gradient(to right, var(--primary), var(--accent)) 1;
padding: 0 0 .25rem;
margin-bottom: 2rem;
width: 100%;
background-color: var(--background-card); #1
}
See the shared control rule with the card-background color applied to select. section 10.4
