Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Inputs in repeating field changing styke/class?

1507182307
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
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?
1507226908

Edited 1507226916
Lithl
Pro
Sheet Author
API Scripter
Yes. It would be no different from the technique used to show/hide areas, except instead of the display property, you'd be changing font-weight and font-style.
1507235874

Edited 1507236102
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
Are you referring to rolltemplate's {{#<property>}}? How does that work with radio buttons? If the {{#}} tag shows/hides based on if its passed a value, don't radios always pass a value? 
1507237115
Lithl
Pro
Sheet Author
API Scripter
No, I'm referring to&nbsp;<a href="https://wiki.roll20.net/CSS_Wizardry#Hide_Areas" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Hide_Areas</a>
1507237988

Edited 1507238706
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
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?&nbsp;
1507238528
Jakob
Sheet Author
API Scripter
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 { /*...*/ }
1507238803
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
Ah, thank you both so much for the hand-holding! +1 rep ;)
1507241148
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
Though, I don't think it'll work for me because the &lt;divs&gt; I'm trying to format are at a higher level than the radios themselves :&lt;&nbsp;
1507267197
Jakob
Sheet Author
API Scripter
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.
1507292328
Finderski
Pro
Sheet Author
Compendium Curator
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. &nbsp;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.
1507293108
Jakob
Sheet Author
API Scripter
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. &nbsp;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.
1507312883
Lithl
Pro
Sheet Author
API Scripter
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) &gt; class &gt; type (input) &gt; sibling (+ or ~) &gt; child (&gt;) &gt; descendant (space with no other symbol) &gt; universal (*) &gt; attribute &gt; 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 .