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

Change textbox color by radio selection

1486597583

Edited 1486597671
DXWarlock
Sheet Author
API Scripter
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?
1486603413

Edited 1486603448
Finderski
Pro
Sheet Author
Compendium Curator
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.
1486617209
Lithl
Pro
Sheet Author
API Scripter
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.
1486631347
Finderski
Pro
Sheet Author
Compendium Curator
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.
1486640706
Kryx
Pro
Sheet Author
API Scripter
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.
1486651631
DXWarlock
Sheet Author
API Scripter
Those sound lovely, just what I need,..but uh..how would I do these? You guy have a quick and dirty example?
1486654487
Kryx
Pro
Sheet Author
API Scripter
<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
1486657602
DXWarlock
Sheet Author
API Scripter
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.