Rendering a custom Checkbox as a button
element in React, while keeping it accessible to screen reader and keyboard users.
When rendering the Checkbox
component as a non-native input
element, the :checked
pseudo-class is not supported. To style the checked state, use the aria-checked
attribute selector:
.button[aria-checked="true"] {
background-color: hsl(204 100% 40%);
color: hsl(204, 20%, 100%);
}
Learn more in Styling.