Selected state

Examples:

Selected text
Selected item in <select>
Selected item in list view
Selected item in tree view

Possibly too:

Selected content associated with a checkbox or radio input

Accessibility

Using different colors for selection than the system default, can make the user experience confusing.
Configuring a custom selection color for part of the page,
Make sure color contrast is okay.

Technology

Text selection

::selection CSS pseudo-selector for styling text selection. Browser-prefix for older browsers.
For text selection only styles that don't affect the layout and will not cause a reflow are allowed, such as colors, outline, and text decoration.

Custom selection:

aria-selected attribute

Example

Styling text selection.

:root {
  --nih-selection-color: white;
  --nih-selection-background-color: black;
}

.nih-text-selection ::selection,
.nih-option-selection option:checked {
  background-color: var(--nih-selection-background-color);
  color: var(--nih-selection-color);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example input with custom text selection color

Example input with custom text selection color Hello world!

Example input with custom text selection color

Table row selection

.nih-table-row-selected {
  background-color: var(--nih-selection-background-color);
  color: var(--nih-selection-color);
}

Table form
Example item 1	Example data
Example item 2	Example data

Experiment

Failed experiment: Selection of native `<option>` elements

Custom styling of option elements must not be allowed, because it is not possible to guarantee enough contrast between the selected and the unselected options. Only the unselected options are stylable, and the selected colors are defined by the system.

.nih-option-selection option {
  background-color: papayawhip;
  color: maroon;
}
.nih-option-selection option::checked {
  /* TODO: This does not work */
  background-color: var(--nih-selection-background-color);
  color: var(--nih-selection-color);
}