Change color of background of selector

Is it possible to make a selector box change color based on what is selected? I've got a dropdown that shows "Healthy", "Wounded", and "Crippled" and would like it to change to yellow if they're wounded, and red if they're crippled. I found a javascrip bit of code that does it, but it relies on an ID, and obviously that won't work with Roll20 character sheets, especially since I want to have the dropdown multiple times for different body parts. <a href="https://stackoverflow.com/questions/18091866/background-color-of-selected-option/18092074#18092074" rel="nofollow">https://stackoverflow.com/questions/18091866/background-color-of-selected-option/18092074#18092074</a> The CSS in the CSS Wizardry is cool but it seems to just change the colors in the dropdown , not once something is selected from it.

You can use a hidden input to accomplish this: HTML &lt;input type='hidden' class='color-control' name='attr_select_name' value='healthy'&gt; &lt;select class='color-receiver' name='attr_select_name'&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value='healthy' selected&gt;Healthy&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value='wounded'&gt;Wounded&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option value='crippled'&gt;Crippled&lt;/option&gt; &lt;/select&gt; CSS .sheet-color-control[value=healthy] ~ .sheet-color-receiver{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:green; } .sheet-color-control[value=wounded] ~ .sheet-color-receiver{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:yellow; } .sheet-color-control[value=crippled] ~ .sheet-color-receiver{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:orange; } Important things to note here are: The input MUST be type='hidden' so that it's value attribute actually updates in the DOM correctly the type='hidden' input must have the same attribute name as the select It's value also must be the same as the selected option for the select