I am attempting to do something that is very simple with normal CSS, but for some reason, Roll20 is having none of it. I am trying to make a simple rollup/rolldown checkbox. It works when I do not specify a class, but I don't want to affect every checkbox on the sheet to be affected this way. I'm attempting to contain the box in the class arrow and the span which will produce the checkbox overlay in class atext . I've also tried attaching ".charsheet" to the beginning of the CSS classes, but that hasn't worked either. CSS input.arrow
{
opacity: 0;
width: 16px;
height: 16px;
position: relative;
top: 5px;
left: 6px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
input.arrow + span.atext::before
{
margin-right: 4px;
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
content: "▼";
width: 14px;
height: 14px;
font-size: 12px;
}
input.arrow:checked + span.atext::before
{
content: "►";
} HTML <input type="checkbox" class="arrow" /><span class='atext'></span> Any help that can be given into the irregular coding environment of Roll20 would be greatly appreciated!
