Good Day, I am trying to add radio buttons that fill from the left, as in the example on the roll20 wiki ( <a href="https://wiki.roll20.net/CSS_Wizardry#Hide_Areas" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Hide_Areas</a> , see the "Fill Radio Button to the Left" section, first example). The code provided there is as follows: < div class = "radiocontainer" >
< input checked = "checked" class = "radiobox reset" type = "radio" name = "attr_strength" value = "0" >
< input class = "radiobox" type = "radio" name = "attr_strength" value = "1" >
< input class = "radiobox" type = "radio" name = "attr_strength" value = "2" >
< input class = "radiobox" type = "radio" name = "attr_strength" value = "3" >
< input class = "radiobox" type = "radio" name = "attr_strength" value = "4" >
< input class = "radiobox" type = "radio" name = "attr_strength" value = "5" >
< input class = "radiobox" type = "radio" name = "attr_strength" value = "6" >
< /div > .radiocontainer {
display: flex;
margin: 2rem;
gap: 10px;
}
.radiobox {
order: 1 ;
border: 1px solid black;
border - radius: 50 %;
background: grey;
height: 2rem;
width: 2rem;
appearance: none;
- webkit - appearance: none;
cursor: pointer;
z - index: 1 ;
}
.radiobox:checked {
opacity: 0 ;
z - index: 0 ;
position: absolute;
}
.radiobox:checked ~ .radiobox {
order: 3 ;
background - color: transparent;
}
.radiobox.reset {
order: 2 ;
background - color: black;
} I am attempting to use that code, almost completely unaltered except for changing the attribute name (because it conflicts with already existing attributes, and so would be bad for testing). However, no matter what I try, it basically ignores any and all formatting attempts. The example on the page is shown as follows: However, what I see is (ignore the edge of the table above the checkboxes): (Edit: I tried to post an image of what I see here, but that didn't quite work. It is just the checkboxes with no css formatting, only checking one box at a time). They do not fill in the to the left, but only fill the checked box. They do work (the attribute changes appropriately), but they seem to completely and categorically ignore all css. I have even tried commenting out the example css with no effect. Furthermore, within the roll20 css styling area, some of the elements of the css seem to be unrecognized. Namely, "gap" and "-webkit-appearance" show with white text, vice the normal blue text that the other similar parts have. I am a novice at html/css, and so am unsure if this is expected behavior with these, but it suggests to me that they aren't recognized by roll20, despite being an example given for roll20. "Gap" also doesn't seem to be recognized by the notepad++ built in css language, based on the same reasoning, if that is of any significance. I would be greatly appreciative if anyone could tell me how I am mucking this up. If needed, I can post further code, but I already confirmed that I don't have any other css .radiocontainer or .radiobox classes, so I wouldn't think there would be a conflict there, and my overall character sheet, counting html, javascript, and css, is upwards of 30k lines, so I would need some idea of what else to look for. Thank you very much.
