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

Radio buttons that fill from right to left don't fill the actual value

1571761044
Stephanie B.
Forum Champion
Sheet Author
I'm using the instructions/code from here:&nbsp; <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> &nbsp;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: &lt;input type="radio" name="attr_conxpartner" class="conxpartner" value="5"&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="radio" name="attr_conxpartner" class="conxpartner" value="4"&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="radio" name="attr_conxpartner" class="conxpartner" value="3"&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="radio" name="attr_conxpartner" class="conxpartner" value="2"&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="radio" name="attr_conxpartner" class="conxpartner" value="1"&gt;&lt;span&gt;&lt;/span&gt; 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?
1571764803
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Stephanie, could you have css from something else that's messing with this? When I put your code in the character sheet editor, it works as (I think) you intend: The only thing I might suggest is adding a "checked" to one of your radios so that a default value is set.
1571767641
Stephanie B.
Forum Champion
Sheet Author
Thanks for the prompt response, Scott! I do have another set of radio buttons just before those, which go left to right and which work fine: &lt;input type="radio" name="attr_conxyou" class="conxyou" value="1" checked="checked"&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="radio" name="attr_conxyou" class="conxyou" value="2"&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="radio" name="attr_conxyou" class="conxyou" value="3"&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="radio" name="attr_conxyou" class="conxyou" value="4"&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="radio" name="attr_conxyou" class="conxyou" value="5"&gt;&lt;span&gt;&lt;/span&gt; CSS: /* Hide actual radio -- This isn't actually repeated in my code. */ input[type="radio"] { opacity: 0; width: 16px; height: 16px; position: relative; top: 5px; left: 6px; margin: -10px; cursor: pointer; z-index: 1; } /* Fake radio */ input[type="radio"].sheet-conxyou + 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 */ input[type="radio"].sheet-conxyou:checked ~ input[type="radio"] + span::before { content: ""; } Both sets of buttons are also in a span with the following CSS: .sheet-connectionbuttons { width: 240px; text-align: center; display:inline-block; } Like I said-- when I put it in jsfiddle, it behaves the same way. Is it possible the set of buttons before the right-to-left ones is messing things up somehow?
1571769354

Edited 1571769366
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Possible, can you post the entire relevant section of html code. It sounds to me like one of your selectors is causing a style to be applied to both.
1571770798
Stephanie B.
Forum Champion
Sheet Author
Sure! It's the connections part of Golden Sky Stories. There are two 5-dot scales that go from left to right, then from right to left. &lt;div class="connections"&gt; &lt;span class="connectionyou"&gt;&lt;/span&gt; &lt;span class="connectioncontents1"&gt;Contents&lt;/span&gt; &lt;span class="connectionsheading"&gt;Connections&lt;/span&gt; &lt;span class="connectioncontents2"&gt;Contents&lt;/span&gt; &lt;span class="connectionspartner"&gt;Partner&lt;/span&gt;&lt;br /&gt; &lt;span class="connectionyou"&gt;You&lt;/span&gt; &lt;span class="connectioncontents1"&gt;&lt;input type="text" name="attr_yourtownconnection1" class="connectionfield"&gt;&lt;/span&gt; &lt;span class="connectionbuttons"&gt; &lt;input type="radio" name="attr_conxyou" class="conxyou" value="1" checked="checked"&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="radio" name="attr_conxyou" class="conxyou" value="2"&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="radio" name="attr_conxyou" class="conxyou" value="3"&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="radio" name="attr_conxyou" class="conxyou" value="4"&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="radio" name="attr_conxyou" class="conxyou" value="5"&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="radio" name="attr_conxpartner" class="conxpartner" value="5"&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="radio" name="attr_conxpartner" class="conxpartner" value="4"&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="radio" name="attr_conxpartner" class="conxpartner" value="3"&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="radio" name="attr_conxpartner" class="conxpartner" value="2"&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="radio" name="attr_conxpartner" class="conxpartner" value="1"&gt;&lt;span&gt;&lt;/span&gt; &lt;/span&gt; &lt;span class="connectioncontents2"&gt;&lt;input type="text" name="attr_yourtownconnection2" class="connectionfield" value="Acceptance"&gt;&lt;/span&gt; &lt;span class="connectionspartner"&gt;Town&lt;/span&gt; &lt;fieldset class="repeating_connections"&gt; &lt;span class="connectionyou"&gt;You&lt;/span&gt; &lt;span class="connectioncontents1"&gt;&lt;input type="text" name="attr_connection1" class="connectionfield"&gt;&lt;/span&gt; &lt;span class="connectionbuttons"&gt;(radio buttons)&lt;/span&gt; &lt;span class="connectioncontents2"&gt;&lt;input type="text" name="attr_connection2" class="connectionfield"&gt;&lt;/span&gt; &lt;span class="connectionspartner"&gt;&lt;input type="text" name="attr_partner" class="connectionspartnerfield"&gt;&lt;/span&gt; &lt;/fieldset&gt; &lt;/div&gt;
1571772548
Stephanie B.
Forum Champion
Sheet Author
Scott, Thanks for pointing me in the right direction. I'm not sure why , but putting the first set of radio buttons into a span (even with no style set) fixed the issue!