Displaying a different element based on the selection in <select>, CSS only

August 22, 2022

I can use CSS pseudo-classes, without JavaScript, to show a hidden element based on a radio box’s selection, e.g. https://stackoverflow.com/a/44036088/575530

Is there a CSS pseudo-class I can use with <select> to achieve the same effect, i.e. to change the display: from none to block on a different element?

>Solution :

In the near future it’s will be possible using :has()

img {
  width: 250px;
  display: none;
}

select:has([value="dog"]:checked) ~ img.dog,
select:has([value="wolf"]:checked) ~ img.wolf,
select:has([value="lioness"]:checked) ~ img.lioness{
  display:block;
}

<select name="animal">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="wolf">Wolf</option>
  <option value="lioness">Lioness</option>
</select>
<img src="https://picsum.photos/id/582/600/400" class="wolf" alt="A wolf">
<img src="https://picsum.photos/id/1074/600/400" class="lioness" alt="A lioness">
<img src="https://picsum.photos/id/237/600/400" class="dog" alt="A Dog">