I'm using the instructions/code from here: <a href="https://wiki.roll20.net/CSS_Wizardry#Fill_Radio_Buttons_to_the_Left" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Fill_Radio_Buttons_to_the_Left</a> and using the code to reverse it, because I want a set of radio buttons that fill from the right to the left. Here's my HTML: <input type="radio" name="attr_conxpartner" class="conxpartner" value="5"><span></span>
<input type="radio" name="attr_conxpartner" class="conxpartner" value="4"><span></span>
<input type="radio" name="attr_conxpartner" class="conxpartner" value="3"><span></span>
<input type="radio" name="attr_conxpartner" class="conxpartner" value="2"><span></span>
<input type="radio" name="attr_conxpartner" class="conxpartner" value="1"><span></span> Here's the CSS: /* Hide actual radio */
input[type="radio"] {
opacity: 0;
width: 16px;
height: 16px;
position: relative;
top: 5px;
left: 6px;
margin: -10px;
cursor: pointer;
z-index: 1;
} /* Fake radio - right to left */
input[type="radio"].sheet-conxpartner + span::before {
margin-right: 4px;
border: solid 1px #a8a8a8;
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
box-shadow: 0 0 2px #ccc;
background: #f6f6f6;
background: radial-gradient(#f6f6f6, #dfdfdf);
content: "";
width: 12px;
height: 12px;
font-size: 24px;
border-radius: 50%;
}
/* Remove dot from all radios _after_ selected one - right to left */
input[type="radio"].sheet-conxpartner:checked ~ input[type="radio"].sheet-conxpartner + span::before,
input[type="radio"].sheet-conxpartner:checked + span::before{
content: "•";
} When I do all this, the 5 fake radio buttons display, but when I click the buttons, the button to the immediate right of the one I clicked gets filled in, while the one I clicked remains empty. Similarly, if I set the attribute value manually, the button to the right displays filled in, but the one corresponding to its actual value does not. When I tried this in jsfiddle (with or without the class declarations), the same behavior happens, so it's not just something weird with how Roll20 parses this. Any ideas? Has anyone successfully made this work? How?