Change textbox color by radio selection

Is there a way to change the color of a textfield based on a radiobutton/checkbox/dropdown? I have a few places I would like to use it, but the first example is enough to get the idea across. Right now I have radio buttons that color depending on if they are selected or not, like this: I am trying to color the background of the first texfield based on the radio button. (red or blue). But cannot seem to find a way outside javascript which you cannot use on the charactersheets. Anyone know a CSS trick to do this?

It'll be kind of hacky, but...I'd change the radio buttons to check boxes, all with the same name, but different values. Then put the checkboxes in front of the input field with display: none; Then you can use straight CSS to color the box.

Finderski said: It'll be kind of hacky, but...I'd change the radio buttons to check boxes, all with the same name, but different values. Then put the checkboxes in front of the input field with display: none; No need. You can style elements based on a radio button's :checked property just like you can do with a checkbox.

Brian said: Finderski said: It'll be kind of hacky, but...I'd change the radio buttons to check boxes, all with the same name, but different values. Then put the checkboxes in front of the input field with display: none; No need. You can style elements based on a radio button's :checked property just like you can do with a checkbox. Although, wouldn't he have to move the text field to the end of the row for that? If he wants to leave the layout how it is the reason I recommended changing to checkboxes was because I've had funky behavior using radio buttons when I duplicated them in the past, for some reason.

Finderski said: Although, wouldn't he have to move the text field to the end of the row for that? If he wants to leave the layout how it is the reason I recommended changing to checkboxes was because I've had funky behavior using radio buttons when I duplicated them in the past, for some reason. You can easily use hidden inputs and trigger off the value. I do that for most situations. I only trigger off the original checkbox in a few cases.

Those sound lovely, just what I need,..but uh..how would I do these? You guy have a quick and dirty example?

<input type="hidden" name="attr_field" class="element-to-determine-style" value=""> <div class="element-to-style"></div> <input type="checkbox" name="attr_field" value="1"> .sheet-element-to-determine-style[value='1'] ~ .sheet-element-to-style { background-color: red; } The checkbox can always be anywhere. The location of the hidden input relative to the div matters. It can be anywhere, but in this example it's an adjacent sibling. You could have it somewhere else: <input type="hidden" name="attr_field" class="element-to-determine-style" value=""> <div> //lots of html elements <div class="element-to-style"></div> </div> <input type="checkbox" name="attr_field" value="1"> .sheet-element-to-determine-style[value='1'] ~ div .sheet-element-to-style { background-color: red; } You can also use [value=''] for the default state or use some :not([value='1']) to say when it isn't checked

That works great, Thank you sir! Aside from me fighting with it for 10 minutes going "why you no work!?" to remember it wouldn't work on the preview page and then proceeding to feel dumb. (no attr saved in preview to toggle it). Time to try to tastefully use it, and not make my sheet look like a clown threw up all over it going overboard.