Repository navigation
Disabled Select / Dropdown is not grayed out #4322
Description
Describe the bug
Disabled dropdowns are not grayed out like disabled inputs.
Steps to reproduce the bug
- Setting the
disabledattribute on aselectelement.
Expected behavior
- A
disabledselectelement should be grayed and have the same styling asdisabledinputs.
Screenshots
System setup
- USWDS version: uswds@2.12.0
- Device: Macbook
- Operating system: Catalina (10.15.7)
- Browser and version: Chrome 93.0.4577.63
Additional context
I was doing some snooping on the HTML / CSS, and it seems like the background-color to gray it out is there but that it's being overriden.
Activity
mejiaj commentedon Nov 30, 2021
These are set via the browser styles. I don't see a background color being set on Edge with the browser styles anyways.
Should we explicitly set disabled styles for text inputs, dropdowns, and form elements in general @thisisdano?
10 remaining items
amyleadem commentedon Sep 30, 2022
@thisisdano @mejiaj
I have included a screenshot that showcases disabled visual cues in Chrome, Firefox, Safari, and Edge for OS. This screenshot displays the following:
I also have a link to a live demo in PR #4969 in case it is hard to glean the style differences from the screenshot.
Things to note:
I lean towards wanting to take a look at developing
disabledstyles for USWDS form elements that provide clearer visual cues that the element is disabled. However, we would need to be careful of poor contrast ratio and look into accessibility implications.