Hidden Radio Button Help.

Hi I have put together a sheet for Nights Black Agents. I have become stuck regarding one point. On the photo above you can see radio boxes under Trust and Trusted by. The left most box represents a value of zero and I would like to make this invisible, so that when no Trust is present you see only 5 unchecked radio symbols. I have read the CSS guide in the forums and had a look at the code for the WOD sheets which have this element but am struggling to get my head round it and implement it in my sheet. Any help is much appreciated. Thanks

<input type="hidden">

Mark said: <input type="hidden"> Thanks. Can you have two input types. In the moment I have: input type="radio" name="attr_trust_for1" value="0" checked If I change "radio" to "hidden", I can not see or select the "0" value radio, I am trying to have it invisible but selectable. Many Thanks

garethd - quick question and point of clarification...when Trust is present, does that mean you want that 0 option to be visible (incase the character loses that Trust)? If that is the case, then I believe something like this should work: html: <input class="sheet-NoTrust" type="radio" name="attr_Trust" value="0" title="@{Trust}" checked /> <input class="sheet-Trust" type="radio" name="attr_Trust" value="1" title="@{Trust}" /> <input class="sheet-Trust" type="radio" name="attr_Trust" value="2" title="@{Trust" /> css: .sheet-NoTrust:not(:checked) { display: inline-block; } .sheet-NoTrust:checked { display: none; } If that doesn't work you may need to use checkboxes (one of the neat tricks in roll20 is that you make checkboxes act like radio buttons. You need to be careful, because things can get screwy, but it's worked for me...it would be a similar approach, but instead of type="radio" you'd use type="checkbox" EDIT: We passed in passing...you answered my question, so with that the above should work for your needs.

I assumed you meant you wanted the level of radio checked in a hidden input to use for reference purposes. In that case instead of <input type="text"> you'd used <input type="hidden">. The radios would all stay normal. Otherwise use what GV said if you want it to show sometimes.

Sorry I'll endeavor to explain a bit better. Players may or may not have a Trust rating with another character. These Trust Points are then spent on bonuses etc. What I'm trying to achieve is that when all points have been spent you can click on an hidden zero value box. This would leave the 5 value boxes visible, but unchecked. So you would have 6 radio boxes that could all be checked but the left most radio would be invisible. Not sure if that's the best explanation. Like the WoD sheet. So you can select all 5 dots but there is a faint X in the left most box to clear the others. I have taken a look at the code but am not sure which parts exactly to use. Thanks for your help so far.

I think the essence is that you want a radio button hidden from view, but clickable. In that case use "opacity: 0"

Quick answer: Here is the html: <input type="radio" class="sheet-normal sheet-zero" name="attr_Trust-1" value="0" checked="checked" /><span></span> <input type="radio" class="sheet-normal" name="attr_Trust-1" value="1" /><span></span> <input type="radio" class="sheet-normal" name="attr_Trust-1" value="2" /><span></span> <input type="radio" class="sheet-normal" name="attr_Trust-1" value="3" /><span></span> <input type="radio" class="sheet-normal" name="attr_Trust-1" value="4" /><span></span> And here is the css: /*-----radio boxes-----*/ /* -----Hide actual radio----- */ input.sheet-normal[type="radio"] { opacity: 0; width: 16px; height: 16px; position: relative; top: 5px; left: 6px; margin: -10px; cursor: pointer; z-index: 1; } /* -----Fake radio----- */ input.sheet-normal[type="radio"] + span::before { margin-right: 2px; border: solid 1px #a8a8a8; line-height: 16px; text-align: center; display: inline-block; vertical-align: middle; border:none; -moz-box-shadow: 0 0 2px #ccc; -webkit-box-shadow: 0 0 2px #ccc; box-shadow: 0 0 2px #ccc; background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%, rgba(255,255,192,0.65) 9%, rgba(255,255,192,0.65) 39%, rgba(255,255,192,0) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,192,0.65)), color-stop(9%,rgba(255,255,192,0.65)), color-stop(39%,rgba(255,255,192,0.65)), color-stop(100%,rgba(255,255,192,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6ffffc0', endColorstr='#00ffffc0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ color:green; content: "•"; width: 16px; height: 16px; font-size: 3em; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } /* -----Remove dot from all radios _after_ selected one----- */ input.sheet-normal[type="radio"]:checked ~ input.sheet-normal[type="radio"] + span::before { content: ""; } /*------------empty traits-----------*/ input.sheet-zero[type="radio"]:checked + span::before { opacity: 0; } input.sheet-zero[type="radio"]:hover + span::before { opacity: 1; } input.sheet-zero[type="radio"] + span::before { color:black; font-size: 1em; content: "✖"; opacity: 0.25; } I didn't pioneer this code, I just use the hell out of it.

Longer answer: to hide something temporarily, give the the :before thing the opacity: 0 command. And then add the code to make it visible on a hover. :hover and opacity: 1; So, the zero radio button would have the class you called your normal radio buttons, and the class that makes it invivisble, and the rest of the group would just have the normal class. Don't forget the <span></span>

Perfect. Thank You so much!!

@Coal Powered Puppet: Thanks so much for sharing! You've made me spend my afternoon implementing this for the 5e shaped sheet. I "position: absolute"d the X. Someone else could use this to put it on the right, but it worked better on the left for me. The "X" was getting stripped out when my scss converts to css and when I minified my css.. If anyone else has these problems you can instead use "\2716" to fix this. EDIT: Roll20 doesn't allow "\xxxx" in css... arrrrrrgggg.

garethd said Perfect. Thank You so much!! You are very welcome. I used it a lot in my sheet making, but, as I said, I did not create it. And it is awesome. Mark said: @Coal Powered Puppet: Thanks so much for sharing! You've made me spend my afternoon implementing this for the 5e shaped sheet. I "position: absolute"d the X. Someone else could use this to put it on the right, but it worked better on the left for me. You could make the last radio in the line be the "sheet-zero" one. That might work better that using position: absolute. Again, all credit goes to the person who made the code (whose name escapes me); I am happy to help sharing their awesomeness.

Awesome stuff Coal Powered Puppet (and our mysterious Benefactor who bequeathed the knowledge on Coal in the first place), thanks for sharing.

Coal Powered Puppet said: Again, all credit goes to the person who made the code (whose name escapes me); I am happy to help sharing their awesomeness. That would be me, on the Exalted sheet, although I believe the work has been expanded by others since then.

Does anyone have any work arounds to Roll20 not allowing "\xxxx" in the content blocks of css? It limits the characters we can put on the sheet. For instance an em dash ("\2014") also breaks the security as well :(

Mark said: Does anyone have any work arounds to Roll20 not allowing "\xxxx" in the content blocks of css? It limits the characters we can put on the sheet. For instance an em dash ("\2014") also breaks the security as well :( Roll20 explicitly has a piece of script for rejecting CSS containing character codes like that. There is no way around it while still utilizing the character codes. It also rejects your CSS if it contains things like the word "script". I've posted the full list of what gets rejected a couple times before, but I don't remember it off the top of my head. (The full list comes from a small array of regex patterns.) You can use special characters by using the actual special character instead of a character code (as demonstrated by CPP above), but it seems that your SASS is having problems with them. (Special characters can also potentially cause problems with the character sheet repo, as saving a file with the special character may introduce a BOM into your file, which screws with the character sheet system.) I don't believe that sanitation routine is run on the HTML; you might be able to get away with using something like — in your HTML and adjusting that element's position with your CSS as desired. Maybe. Depending on what you need.

The using the actual em dash character causes security concerns as well. But the actual X character posted above works. Not sure why that is. But as you say both my sass and my css minifier do not like the straight X. I can try to prevent them from stripping out the character - I think it may be due to the type of encoding, but neither UTF-8 nor ISO-8859-1 nor windows-1252 seemed to solve it. I could put it in the HTML instead and try that route. Maybe I'll do that if possible. EDIT: Used HTML instead. No problems. It won't work in one case, but I can live with a small "-" instead of an em dash "—" or an en dash "–".