CSS :selected pseudo class similar to :checked, but for elements

The CSS  elected pseudo-class is used specifically to target elements within a dropdown that are currently selected by the user. It works similarly to the :checked pseudo-class, which applies to checkboxes and radio buttons when they are checked.

Here’s how the  elected pseudo-class functions and how it compares to :checked:

Target Elements:

• elected is only applicable to elements inside a

.

Purpose:

Both pseudo-classes help style elements based on their selection state, enabling visual feedback without JavaScript.

Usage Example:

option:selected {
  background-color: #007BFF;
  color: white;
}
input[type="checkbox"]:checked {
  border: 2px solid green;
}

Key Differences:

elected only works inside dropdown menus, and not all browsers allow styling of elements extensively due to OS-level rendering restrictions.

:checked offers more consistent styling possibilities across browsers for checkboxes and radio buttons.

Practical Tips:

Because browser support for styling is limited, use  elected mainly for simple color or font changes.

For more complex styling, consider custom dropdown components built with divs and JavaScript.

In summary, while  elected and :checked serve similar purposes—indicating user selection—their scope differs by element type and styling capabilities. Knowing when and how to use each pseudo-class helps create better, more interactive forms with CSS alone.