Can I Style a Select Element Based on the Selected Option Using Only CSS?

Style Element Based on Selected

Can you style a element based on the selected using only CSS?

Despite popular belief, it is indeed possible to style a element based on the currently selected using purely CSS.

The forbidden fruit? Not anymore.

Traditionally, styling the element alone would only modify the appearance of the option in the drop-down list, not the element itself. However, modern advancements in CSS have introduced a new frontier of possibilities.

Enter the :has() pseudo-class.

In browsers that support both the :has() pseudo-class and styling of elements, you can leverage the following code:

select:has(option[selected][value="3"]) { background: orange; } Copy after login This code will apply the orange background to the element when the with value '3' is selected.

But wait, there's more!

CSS also allows you to make the element responsive to changes in the selected option via the onchange event. By setting the data-chosen attribute of the element to the value of the selected option, you can create dynamic styling based on user interaction.

... Copy after login select[data-chosen='opt3'] { border: 2px solid red; } Copy after login With this approach, you have complete control over the appearance of the element based on the selected and its value, enabling a wide range of customization possibilities.