Selects are a common interactive element for choosing among a list of predefined options. The a17t .select element is a specialized type of field with a downward chevron.
Unlike some elements, the select element must be applied as the parent of the actual HTML <select> element it’s being applied to. This allows the chevron to be inserted automatically.
Long options — By default, .select elements (like all .field-based elements) have a width of 100%. This is so that the width is determined by your interface, not your data. Extremely long options in your select will be cut off by the chevron.
Selects have full tone, priority, and disabling support. Priorities are communicated through elevation.
Use Aria roles and labels. When building forms, it’s easy to rely on visual guidelines to show relationships between elements. Unfortunately, this doesn’t help those interacting with your site using a screenreader or other assistive technologies. For this reason, it’s important to use ARIA labels and roles wherever possible.
Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.
Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!
Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).
sets default border color
sets the speed of the hover and focus transition
sets the base box shadow
sets the opacity of disabled fields
0 0 1px 1px var(--color-light)
sets additional box shadow on hover
0 0 0 2px var(--color-light)
sets additional box shadow on focus
how much the chevron should be offset
sets the color of the chevron
You can also customize this element by simply overriding any of its CSS attributes, listed
here. Contextual variable defaults (e.g., --color-content) and global
variables (e.g., --family-primary) are defined here.