How to Change the Selected Option Color using CSS?

By default, the color of the selected option of a dropdown is the same as the other options. But for a better user experience, we generally keep the color of the selected option different from the other options. And we can do it very easily with CSS.

To change the selected option color in CSS, we use the :checked pseudo-class selector. The :checked selector targets only the selected option of a dropdown.

The following example targets the selected option of the dropdown and sets its text color to red:

Example:

option:checked{
   color: red;
}

You can also add other styles to the selected option such as background-color, font-style, font-weight, etc.

See the example below:

Example:

option:checked{
   color: darkblue;
   background: yellow;
   font-style: italic;
   font-weight: bold;
}