Changing an element's background color based on a selection?

Hello. I am working on a custom character sheet. I have a repeating section for conditions and I want the condition's name background outside edit mode to change color based on the source of the condition (e.g. red for Injuries, purple for Disease, green for Poison etc) <fieldset class="repeating_conditionscustom2"> <div class="sheet-fieldset-item">     <div class="sheet-checkbox-cog">         <input type="checkbox" name="attr_options-flag" checked="checked">         <span class="sheet-toggle-icon"></span>     </div>     <input type="checkbox" name="attr_options-flag" checked="checked" class="sheet-toggle" hidden>     <div class="sheet-toggle-checked">         <div class="sheet-form">             <div class="sheet-form-header">Edit Condition</div>             <div class="sheet-form-body">                 <div class="sheet-form-group">                     <label>Name:</label>                     <input type="text" name="attr_conditioncustom_name">                 </div>                 <div class="sheet-form-group">                     <label>Source:</label>                     <select name="attr_conditioncustom_source">                         <option selected="selected">Injury</option>                         <option>Disease</option>                         <option>Poison</option>                         <option>Curse</option>                         <option>Other</option>                     </select>                 </div>                 <div class="sheet-form-group">                     <textarea name="attr_conditioncustom_description"></textarea>                 </div>             </div>         </div>     </div>     <div class="sheet-toggle-unchecked">         <div class="sheet-pc-conditioncustom">             <span name="attr_conditioncustom_name"></span>             <span name="attr_conditioncustom_source"></span>             <span name="attr_conditioncustom_description"></span>         </div>     </div> </div> </fieldset> I have very little experience with html and css. Is there any way to do that? Thank you.

You can almost certainly do that with Roll20's version of JQuery, but I'm not very familiar with that approach. You can do it with a pure CSS solution, though. First, create a hidden input before the area you want to change colour, and give it the same name as the select. give it a class you use to target it in CSS: <input type="hidden" name="attr_conditioncustom_source" class="condition-colour"> If its not in the same repeating section, you'll need to use a sheet worker to update it's value. Remember to put this directly before the element whose colour you want to change. The element whose colour you want to change also needs to be given a class, say condition . I don't know which element you want to change above. Then create a series of CSS rules to target that class and the class of the section you want to change. input.condition-colour[value="red"] ~ .condition { background-color: red; } Repeat this for every colour you want to use. The colour inside the CSS rule doesn't need to be the same as the select value you use.

I'd recommend the pure css solution. Doing with jQuery in a repeating section is very difficult and requires a lot of supporting infrastructure.

It might be worth mentioning that it looks like your code has an attack of divitis . This looks a bit sus: <div class="sheet-toggle-unchecked">         <div class="sheet-pc-conditioncustom">             <span name="attr_conditioncustom_name"></span>             <span name="attr_conditioncustom_source"></span>             <span name="attr_conditioncustom_description"></span>         </div>     </div> And could probably have the same effect, written like:         <div class="sheet-pc-conditioncustom sheet-toggle-unchecked">             <span name="attr_conditioncustom_name"></span>             <span name="attr_conditioncustom_source"></span>             <span name="attr_conditioncustom_description"></span>         </div> There are some times where this might be needed:  <div class="sheet-form-group">                     <textarea name="attr_conditioncustom_description"></textarea>                 </div> But most of the time, you can write it as                     <textarea name="attr_conditioncustom_description" class="sheet-form-group"></textarea> This section looks like it should probably have a header element: <div class="sheet-form-header">Edit Condition</div> Like this: <h2>Edit Condition</h2> (You can add the class if you want specific styling). Try to avoid divs when they contain just a single element, or when other elements are better suited. There are cases where you want to use divs, even nested divs, to get the css styling you want, but more of the time you don't need to do that.

THANK YOU! This worked perfectly! Thank you for the tips as well, much appreciated.

You do NOT need to put the hidden variable immediately above each element you wish to style,  nor do you need to do anything special for ones inside of sheetworkers.  What I do is I put a global test at the VERY TOP of the html file (inside the  sheet-user-root  div)  <input name="attr_NPC" class="sheet-testNPC" type="hidden" value="1"> <!--For Global testing if character is an NPC. classes sheet-HideIfPC sheet-HideIfNotPC--> There is a non-hidden version of this same attribute that the user can edit as normal, but this one up at the top of the file is where all the testNPC tests are made from.  All the other elements inside the whole sheet are inside div's under that. Sometimes buried deep under it, but they are somewhere under it.   Some of these elements have something such as  <div class="sheet-HideIfPC" > Then the css styles according to the value of the one and only testNPC class and the class of the element being styled.  .sheet-testNPC:not([value="0"])~div .sheet-HideIfNotPC, .sheet-testNPC[value="0"]~div .sheet-HideIfPC { display: none; } Obviously you would be setting background color instead of setting display none, but the principle is the same. One test at the very top, and then just styling classes on the elements to be styled depending upon the test. 

While you are correct that it's true that you can put the attribute right at the top of your sheet, it's a lot easier to code when you don't know CSS if you put it before and on the same "level" in the CSS hierarchy.

GiGs said: While you are correct that it's true that you can put the attribute right at the top of your sheet, it's a lot easier to code when you don't know CSS if you put it before and on the same "level" in the CSS hierarchy. It probably depends a lot upon whether you are doing two or three, or hundreds. If you are doing a whole lot of the same types of styling on the same few conditions, one test for each condition at the top saves an enormous amount of time and space.