Can you Style labels based on input value?

I'm making a custom sheet for Pendragon, and in that system you choose a religion (eg. British Christian, Pagan, etc), and I have the list of these in a dropdown, the value stored as a numebr from 1 to 5. You also have a bunch of personality traits, and for each religion, 5 traits are important. The Roman Christian ones, for instance, are Chaste, Forgiving, Merciful, Modest, and Temperate. I have these names stored in labels elsewhere on the sheet. Is it possible to use CSS to underline the 5 traits associated with a religion, when that religion is selected? Or maybe through a sheet worker?

You don't have the access to the DOM so the only way I think you could do it is with hidden check/radio buttons the way configuration is done.  Take a look at any of the character sheets with configuration such as the Stormbringer or Savage Worlds.  They hide/reveal elements based on radio/checkboxes and you would have to create two elements for each trait one with the underlne and one without.

I have found Brian's post about hiding areas, but i dont understand the code, and cant figure out what's going on in the stormbringer sheet (though the sheetworkers help me immensely in figuring out an unrelated problem). For this problem, I have a select that looks like this: <select name="attr_Religion" class='sheet-personaldata'> <option value="1">British Christian</option> <option value="2">Roman Christian</option> <option value="3">Pagan</option> <option value="4">Wotanic</option> <option value="5">Pict Heathen</option> </select> Elsewhere in the sheet I think I need something like this: <label class='sheet-britishchristian sheet-romanchristian'>Chaste</label> <label class='sheet-nounderline >Chaste</label> <label class='sheet-pagan'>Energetic*</label> <label class='sheet-nounderline'>Energetic*</label> I think I'm supposed to use CSS to make the sheet-nounderline go invisible and the sheet-britishchristian class become visible, when the select value = 1. Can you show me how to do this? Or if I'm going about it all wrong, what's a better way to do it?

ere's one way of doing (as David mentioned you need to use hidden checkboxes)... HTML: <div class='sheet-col' style='width:95px;'> <!-- Cost (65px)--> <h4 class="sheet-subsectionHeader" style="text-align: center;"><input type="checkbox" class="sheet-NoPP" name="attr_NoPPRule" style="display: none; width: 15px;" /><span class="sheet-SpellCost"></span></h4> </div> CSS: .charsheet .sheet-NoPP:checked + span.sheet-SpellCost::before { content: "Casting Mod"; } .charsheet .sheet-NoPP:not(:checked) + span.sheet-SpellCost::before { content: "Cost"; } I have a checkbox earlier in the sheet to indicate whether the setting requires power points or not.  I then put that same checkbox in this heading tag, but I hide it. Then based on the state of that checkbox (checked or unchecked), the words change on the sheet. You should be able to do something similar. Your dropdown menu has a series of options, each with a numerical value you'd just create a number of checkboxes, each with one of the possible values, and you'd name them all the same as your dropdown menu. Then when you select an option in the dropdown, the appropriate checkbox should also check.  Your CSS would need to look something like: label.sheet-Christianity, /*sets the label to have no text decoration by default*/ label.sheet-Pagan { text-decoration: none; } /*If the religion checkbox is 0, then underline labels with the class sheet-Christianity*/ .sheet-useReligion input[value="0"]:checked ~ label.sheet-Christianity { text-decoration: underline;; } /*If the religion checkbox is 0, then underline labels with the class sheet-Pagan*/ .sheet-useReligion input[value="1"]:checked ~ label.sheet-Pagan { text-decoration: underline;; } That's completely untested, but should point you in the right direction...I hope. :)

Thanks, i misunderstood what David was trying to tell me earlier. It hink I understand the CSS part of it now. I'm still a bit fuzzy on the use of the checkboxes. So, i need to create 1 hidden checkbox for each religion. I'm a bit fuzzy on this bit, but you've pointed me in the right direction. It's bedtime for me now, so I'll see if I can figure it out when i get up. 

Ok, so, using the code you provided, here's what I came up with and it seems to work (you'll need to adjust of course, because you don't need separate labels for underline vs. no  underline.  but to illustrate things I used the nounderline class for the Religions 4 and 5. HTML: <div class='sheet-2colrow'> <div class='sheet-col'> <select name="attr_Religion" class='sheet-personaldata'> <option value="1">British Christian</option> <option value="2">Roman Christian</option> <option value="3">Pagan</option> <option value="4">Wotanic</option> <option value="5">Pict Heathen</option> </select> </div> <div class='sheet-col'> <input class='sheet-useReligion' type='checkbox' name='attr_Religion' value='1' style='display: none;' /> <input class='sheet-useReligion' type='checkbox' name='attr_Religion' value='2' style='display: none;' /> <input class='sheet-useReligion' type='checkbox' name='attr_Religion' value='4' style='display: none;' /> <input class='sheet-useReligion' type='checkbox' name='attr_Religion' value='3' style='display: none;' /> <input class='sheet-useReligion' type='checkbox' name='attr_Religion' value='5' style='display: none;' /> <label class='sheet-britishchristian sheet-romanchristian'>Chaste</label> <label class='sheet-nounderline' >Chaste</label> <label class='sheet-pagan'>Energetic*</label> <label class='sheet-nounderline'>Energetic*</label> </div> </div> CSS: label.sheet-britishchristian, label.sheet-romanchristian, label.sheet-nounderline, label.sheet-pagan { text-decoration: none; } .sheet-useReligion[value="1"]:checked ~ label.sheet-britishchristian, .sheet-useReligion[value="2"]:checked ~ label.sheet-romanchristian, .sheet-useReligion[value="3"]:checked ~ label.sheet-pagan, .sheet-useReligion[value="4"]:checked ~ label.sheet-nounderline, .sheet-useReligion[value="5"]:checked ~ label.sheet-nounderline { text-decoration: underline; } I hope this helps.

You are awesome. I couldnt get to bed without figuring this out, and you did it for me. Thanks!