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?
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">