Different checkboxes in the same sheet

So I've employed this method for changing the images of my checkboxes: &lt;input type="checkbox" /&gt;&lt;span&gt;&lt;/span&gt; /* Hide actual checkbox */ input[type="checkbox"] { &nbsp; &nbsp; opacity: 0; &nbsp; &nbsp; width: 16px; &nbsp; &nbsp; height: 16px; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; top: 5px; &nbsp; &nbsp; left: 6px; &nbsp; &nbsp; margin: -10px; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; z-index: 1; } /* Fake checkbox */ input[type="checkbox"] + span::before { &nbsp; &nbsp; margin-right: 4px; &nbsp; &nbsp; line-height: 14px; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; vertical-align: middle; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; content: url("<a href="https://i.imgur.com/s9AnejE.png" rel="nofollow">https://i.imgur.com/s9AnejE.png</a>"); &nbsp; &nbsp; width: 14px; &nbsp; &nbsp; height: 14px; &nbsp; &nbsp; font-size: 12px; } input[type="checkbox"]:checked + span::before { &nbsp; &nbsp; content: url("<a href="https://i.imgur.com/IYXFzsA.png" rel="nofollow">https://i.imgur.com/IYXFzsA.png</a>"); } And it works, great. But I'd really like to have a variety of checkbox-styles in the same sheet. How could I do that?

If you want different styles of checkbox, just give each a class, and then add the class name in your CSS. You'll want to give your checkbox a name too, if you want roll20 to remember its state. &lt;input type="checkbox" name="attr_mycheckbox" class="sheet-this-style" /&gt;&lt;span&gt;&lt;/span&gt; Then your CSS targets it input[type="checkbox"].sheet-this-style { &nbsp; &nbsp; opacity: 0; &nbsp; &nbsp; width: 16px; &nbsp; &nbsp; height: 16px; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; top: 5px; &nbsp; &nbsp; left: 6px; &nbsp; &nbsp; margin: -10px; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; z-index: 1; }

I'll also throw in that you can actually style the checkbox directly by setting the appearance property to none. So, your code could be: HTML &lt;input type="checkbox" name="attr_my_checkbox" class="styled-checkbox"&gt; CSS .styled-checkbox { -webkit-appearance:none;/*appearance property requires the prefixed version to work in safari for mobile support*/ &nbsp;&nbsp;&nbsp;&nbsp;appearance:none; &nbsp; &nbsp; margin-right: 4px; &nbsp; &nbsp; line-height: 14px; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; vertical-align: middle; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; content: url("<a href="https://i.imgur.com/s9AnejE.png" rel="nofollow">https://i.imgur.com/s9AnejE.png</a>"); &nbsp; &nbsp; width: 14px; &nbsp; &nbsp; height: 14px; &nbsp; &nbsp; font-size: 12px; } .styled-checkbox:checked{ &nbsp; &nbsp; content: url("<a href="https://i.imgur.com/IYXFzsA.png" rel="nofollow">https://i.imgur.com/IYXFzsA.png</a>"); }

Another option is to use formatted labels with the attribute 'for' referencing hidden checkboxes. This requires an 'id' attribute on the checkbox, which Roll20 now supports.

Richard W. said: Another option is to use formatted labels with the attribute 'for' referencing hidden checkboxes. This requires an 'id' attribute on the checkbox, which Roll20 now supports. Can you give or link an example for this?

GiGs said: If you want different styles of checkbox, just give each a class, and then add the class name in your CSS. You'll want to give your checkbox a name too, if you want roll20 to remember its state. &lt;input type="checkbox" name="attr_mycheckbox" class="sheet-this-style" /&gt;&lt;span&gt;&lt;/span&gt; Then your CSS targets it input[type="checkbox"].sheet-this-style { &nbsp; &nbsp; opacity: 0; &nbsp; &nbsp; width: 16px; &nbsp; &nbsp; height: 16px; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; top: 5px; &nbsp; &nbsp; left: 6px; &nbsp; &nbsp; margin: -10px; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; z-index: 1; } I must be misunderstanding you. Now I have the following: &lt;input type="checkbox" name="style1" /&gt;&lt;span&gt;&lt;/span&gt; &lt;input type="checkbox" name="style2" class="sheet-this-style" /&gt;&lt;span&gt;&lt;/span&gt; /* FIRST STYLE Hide actual checkbox */ input[type="checkbox"] { &nbsp; &nbsp; opacity: 0; &nbsp; &nbsp; width: 16px; &nbsp; &nbsp; height: 16px; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; top: 5px; &nbsp; &nbsp; left: 6px; &nbsp; &nbsp; margin: -10px; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; z-index: 1; } /* FIRST STYLE Fake checkbox */ input[type="checkbox"] + span::before { &nbsp; &nbsp; margin-right: 4px; &nbsp; &nbsp; line-height: 14px; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; vertical-align: middle; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; content: url("<a href="https://i.imgur.com/s9AnejE.png" rel="nofollow">https://i.imgur.com/s9AnejE.png</a>"); &nbsp; &nbsp; width: 14px; &nbsp; &nbsp; height: 14px; &nbsp; &nbsp; font-size: 12px; } input[type="checkbox"]:checked + span::before { &nbsp; &nbsp; content: url("<a href="https://i.imgur.com/IYXFzsA.png" rel="nofollow">https://i.imgur.com/IYXFzsA.png</a>"); } /* SECOND STYLE Hide actual checkbox */ input[type="checkbox"].sheet-this-style { &nbsp; &nbsp; opacity: 0; &nbsp; &nbsp; width: 16px; &nbsp; &nbsp; height: 16px; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; top: 5px; &nbsp; &nbsp; left: 6px; &nbsp; &nbsp; margin: -10px; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; z-index: 1; } /* SECOND STYLE Fake checkbox */ input[type="checkbox"].sheet-this-style + span::before { &nbsp; &nbsp; margin-right: 4px; &nbsp; &nbsp; line-height: 14px; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; vertical-align: middle; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; content: url("<a href="https://i.imgur.com/s9AnejE.png" rel="nofollow">https://i.imgur.com/s9AnejE.png</a>"); &nbsp; &nbsp; width: 14px; &nbsp; &nbsp; height: 14px; &nbsp; &nbsp; font-size: 12px; } input[type="checkbox"].sheet-this-style:checked + span::before { &nbsp; &nbsp; content: url("<a href="https://i.imgur.com/ttDhgho.png" rel="nofollow">https://i.imgur.com/ttDhgho.png</a>"); } But that makes the first style go back to normal and the second style doesn't produce a working checkbox at all.

It's hard to give advice on CSS on roll20 now, because people might or might not be using the newish CSE, which changes the way you have to write class names. Try the code again without the sheet- part to see if that's the issue. &lt;input type="checkbox" name="attr_mycheckbox" class="this-style" /&gt;&lt;span&gt;&lt;/span&gt; input[type="checkbox"].this-style { &nbsp; &nbsp; opacity: 0; &nbsp; &nbsp; width: 16px; &nbsp; &nbsp; height: 16px; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; top: 5px; &nbsp; &nbsp; left: 6px; &nbsp; &nbsp; margin: -10px; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; z-index: 1; }

I should add my suggestion was for making changes to the actual checkbox, not hiding one - I missed that you were doing that. So all bets are off! Why are you hiding a checkbox?

I copied and pasted from&nbsp; <a href="https://wiki.roll20.net/CSS_Wizardry#Checkbox_and_Radio_Input" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Checkbox_and_Radio_Input</a> , the Live Demo under the Checkbox Alternative header.

GiGs said: It's hard to give advice on CSS on roll20 now, because people might or might not be using the newish CSE, which changes the way you have to write class names. Try the code again without the sheet- part to see if that's the issue. &lt;input type="checkbox" name="attr_mycheckbox" class="this-style" /&gt;&lt;span&gt;&lt;/span&gt; input[type="checkbox"].this-style { &nbsp; &nbsp; opacity: 0; &nbsp; &nbsp; width: 16px; &nbsp; &nbsp; height: 16px; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; top: 5px; &nbsp; &nbsp; left: 6px; &nbsp; &nbsp; margin: -10px; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; z-index: 1; } How would I use this to style the checkbox into something that doesn't look like a checkbox? Sorry if it wasn't clear that that's what I'm doing. The code in my original post replaces the two checkbox states with two images – one an empty circle and the other a filled circle. I guess that's probably the reason for hiding the checkbox. What I'm after is to do the same for a different set of checkboxes and give them a different pair of images.

The parts on that page that are hidden by default are parts that I would recommend people don't use, unless there is a specific need for them and you know what you're doing. People often have difficulty getting them to work, and they have been superceded by methods that are easier to use - those are the methods that are visible.

Rich K. said: How would I use this to style the checkbox into something that doesn't look like a checkbox? Sorry if it wasn't clear that that's what I'm doing. I'll have to leave that for someone else to answer in detail, since CSS isn't my forte. But have you tried the included link to Richard T's method? <a href="https://jsfiddle.net/medieve/rfkvu3hm/" rel="nofollow">https://jsfiddle.net/medieve/rfkvu3hm/</a> Just addng your style name to all 3 inputs in the jsfiddle seems to work, in the jsfiddle at least. Also if the example in your first post works, I see no reason why applying a style shouldnt work. Just remember to add the style to all 3 CSS elements. &lt;input type="checkbox" name="attr_whatever" class="sheet-sample-style" /&gt;&lt;span&gt;&lt;/span&gt; /* Hide actual checkbox */ input[type="checkbox"].sheet-sample-style { &nbsp; &nbsp; opacity: 0; &nbsp; &nbsp; width: 16px; &nbsp; &nbsp; height: 16px; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; top: 5px; &nbsp; &nbsp; left: 6px; &nbsp; &nbsp; margin: -10px; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; z-index: 1; } /* Fake checkbox */ input[type="checkbox"].sheet-sample-style + span::before { &nbsp; &nbsp; margin-right: 4px; &nbsp; &nbsp; line-height: 14px; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; vertical-align: middle; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; content: url("<a href="https://i.imgur.com/s9AnejE.png" rel="nofollow">https://i.imgur.com/s9AnejE.png</a>"); &nbsp; &nbsp; width: 14px; &nbsp; &nbsp; height: 14px; &nbsp; &nbsp; font-size: 12px; } input[type="checkbox"].sheet-sample-style:checked + span::before { &nbsp; &nbsp; content: url("<a href="https://i.imgur.com/IYXFzsA.png" rel="nofollow">https://i.imgur.com/IYXFzsA.png</a>"); }

Scott C. said: I'll also throw in that you can actually style the checkbox directly by setting the appearance property to none. So, your code could be: HTML &lt;input type="checkbox" name="attr_my_checkbox" class="styled-checkbox"&gt; CSS .styled-checkbox { -webkit-appearance:none;/*appearance property requires the prefixed version to work in safari for mobile support*/ &nbsp;&nbsp;&nbsp;&nbsp;appearance:none; &nbsp; &nbsp; margin-right: 4px; &nbsp; &nbsp; line-height: 14px; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; vertical-align: middle; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; content: url("<a href="https://i.imgur.com/s9AnejE.png" rel="nofollow">https://i.imgur.com/s9AnejE.png</a>"); &nbsp; &nbsp; width: 14px; &nbsp; &nbsp; height: 14px; &nbsp; &nbsp; font-size: 12px; } .styled-checkbox:checked{ &nbsp; &nbsp; content: url("<a href="https://i.imgur.com/IYXFzsA.png" rel="nofollow">https://i.imgur.com/IYXFzsA.png</a>"); } Works perfectly! Many thanks Scott.