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

Help with creating a customer character sheet (using radio/checked buttons)

April 25 (3 months ago)

My friend and I are trying to make some custom character sheets based on the Monster of the Week character sheets with HTML and CSS, however I'm stumped on how they made their drop down box playbook selector. I can't seem to find a way to recreate it without the sheet just showing every option instead of just the one I've selected.

This is the basic code I've been trying to work with, if I can get this working in Roll20 I think I'll be able to add the sheet info on my own. But at this point I'm stumped.

HTML:

<input type="radio" name="attr_SkinCheck" value="0" checked="checked"> <span data="option1">Option1</span>
<input type="radio" name="attr_SkinCheck" value="1" checked="checked"> <span data="option2">Option2</span>

<div class="sheet-Option1"><p align="center"><b><i><span data="select-text">You have selected Option 1!</span></i></b></p></div>
<div class="sheet-Option2"><p align="center"><b><i><span data="select-text">You have selected Option 2!</span></i></b></p></div>


CSS:

div.sheet-Option1,
div.sheet-Option2,{
    display: none;
}

input[type="radio"][value="0"]:checked ~ div.sheet-Option1,
input[type="radio"][value="1"]:checked ~ div.sheet-Option2,{
    display: block;
}

Any help with this is appreciated.


April 25 (3 months ago)

Edited April 25 (3 months ago)
vÍnce
Pro
Sheet Author

Try removing the comma at the end of the last selectors in your css rules.

Example; (no comma after foo3)

.foo,
.foo2,
.foo3 {    
/*style*/
}