Working on a character sheet where I'd like the styling of the item to change based on a radio selection in a hidden field. In the screenshot, "Gifted" should change style based on the selected radio: Bold for Major, Normal for Minor, and Italics for Free. Is this possible using just html/css?

That indeed looks tantalizing, though I might still need help with how that might translate to be used with radio buttons as I'm working with a three-state instead of a binary state situation. With radios, choosing any of the options registers it as "checked", any way to do a more finite distinction?

Jakob said: In that case, put display:hidden checkboxes with the same name and value as the radios in the correct position. They will mirror the radios' checked behaviour and you can key the CSS rule off them. From past experience, radios with the same name in different parts of the sheet are...wonky. You'll want to cheat and use check boxes, all of them with the same name—in Roll20 that'll act like a radio button, but doesn't run into the issue that radio buttons do.

Finderski said: Jakob said: In that case, put display:hidden checkboxes with the same name and value as the radios in the correct position. They will mirror the radios' checked behaviour and you can key the CSS rule off them. From past experience, radios with the same name in different parts of the sheet are...wonky. You'll want to cheat and use check boxes, all of them with the same name—in Roll20 that'll act like a radio button, but doesn't run into the issue that radio buttons do. Radios work fine as long as there's only one radio per value and all checkboxes with the same value are hidden. Radios still have a better user experience when you click them twice. That's why I said to make the extra inputs for the CSS {display: none} checkboxes - then the original radios will work as expected. You cannot make the hidden inputs radios, that will indeed show some odd behaviour.

Jakob said: You can make separate rules for each state using [value="XYZ"]: input[type=radio][value="major"]:checked ~ .sheet-gifted {
/*...*/
}
input[type=radio][value="minor"]:checked ~ .sheet-gifted {
/*...*/
}
input[type=radio][value="free"]:checked ~ .sheet-gifted {
/*...*/
} I would generally recommend giving each a separate class, rather than using the attribute selector on value. id (not that ids are viable for Roll20 sheets) > class > type (input) > sibling (+ or ~) > child (>) > descendant (space with no other symbol) > universal (*) > attribute > pseudo (:checked) when you have the option to choose. Obviously, sometimes you have to use a selector lower on the totem pole (:checked is mandatory in a situation like this). So instead of something like input[type=radio][value=major]:checked ~ .sheet-gifted , you could use something like .sheet-major:checked ~ .sheet-gifted .