Changing background images via user input

I want to be able to update the background color/image when the user clicks a radio button or selects an option from a drop down. I am able to change the drop down background but not the body background. Is this possible with just HTML + CSS?
Here is my last attempt:


  <select id="role">
   <option value="none">None</option>
   <option value="fighter">Fighter</option>
   <option value="cleric">Cleric</option>
   <option value="mage">Mage</option>
   <option value="rogue">Rogue</option>


#role option[value="fighter"] {background-color: indianred;}
#role option[value="mage"] {background-color: aquamarine;}
#role option[value="cleric"] {background-color: bisque;}
#role option[value="rogue"] {background-color: yellowgreen;}

I believe you will need to use JavaScript to accomplish this.

1 Like

That was my assumption based on what I saw when trying to find a solution. Thanks for the quick feedback.