checkbox formatting

Good day, I am building a custom sheet that records body horror from accumulated use of graft/mutagens.  There are thresholds over which your score becomes dangerous. My original sheet, which I'm relatively happy with uses number inputs. This is good enough, but if I wanted to add an addiction mechanic AND visually display the thresholds at which they are safe/dangerous, I was thinking of trying to implement checkboxes. My problem is formatting the checkboxes using CSS.  On a side note, I also tried summing the checkmarks, but that didn't work. Right now the check marks look like this:  It would be useful to be able to change the colors of the checkboxes in order to indicate safe/visible/dangerous.  Is this possible? I tried the code below, using and tried to change the color of the class in CSS (.safeHorror {color:green;}) for example.         < input type = "checkbox"         name = "attr_horror1"         value = "1"         class = "safeHorror" > I'm fine with the number inputs, but thought they might look better as colored checkmarks. Normal disclosure: i have no coding training, I taught myself sheets from these forums and a few HTML/CSS tutorials, and I have never been able to get a handle on sheetworkers or Java. Thanks,

I should add that I format using the native Roll20 3ColRow. 

checkboxes are notoriously hard to style. Most advice I've seen involves hiding the checkbox, adding a label element that is linked to the checkbox, and then style the label to look like a checkbox. This is the clearest guide I found on it: <a href="https://paulund.co.uk/how-to-style-a-checkbox-with-css" rel="nofollow">https://paulund.co.uk/how-to-style-a-checkbox-with-css</a> The CSS Wizardry guide on the wiki might help too: <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> If there's an easier way, I'd love to know it too! It seems like changing the colour of the checkmark should be easy. I'm not sure why adding your checkboxes didn't work. This should be fairly straightforward. Can you share the code you used? You might find the answers you need here: <a href="https://cybersphere.me/roll20/" rel="nofollow">https://cybersphere.me/roll20/</a>

GiGs said: I'm not sure why adding your checkboxes didn't work. This should be fairly straightforward. Can you share the code you used? You might find the answers you need here: <a href="https://cybersphere.me/roll20/" rel="nofollow">https://cybersphere.me/roll20/</a> I remade the code, but it was essentially the code below with each checkmark input being added to the number input in the value, and each attr_horrorX following the input type checkbox for the one shown for attr-horror1: &lt;label for="attr_totalHorror"&gt;Total:&lt;/label&gt; &lt;input type="number" name="attr_totaHorror" value="@{attr_horror1}+@{attr_horror2}+@{attr_horror3}" disabled="true"&gt; &lt;input type="checkbox" name="attr_horror1" value="1"&gt;

There's actually several ways to style checkboxes and radios now a days. Most of them are going to be more straightforward than the complicated html of hiding the checkbox and using another element to replicate it. If all you want to do is change the color of the checkbox background, use the accent-color css property If you want to do more complex styling like borders, shapes, custom content, etc; use the appearance css property. This property allows checkboxes and radios to be styled with the same freedom as divs. HTML &lt;input type="checkbox" name="attr_my_checkbox" class="accented"&gt; &lt;input type="checkbox" name="attr_my_checkbox" class="direct-styled"&gt; CSS /* Accent color CSS */ .accented{ &nbsp;&nbsp;&nbsp;&nbsp;accent-color: green; } /* direct styling */ .direct-styled{ &nbsp;&nbsp;&nbsp;&nbsp;appearance: none; /* remove the default checkbox appearance */ &nbsp;&nbsp;&nbsp;&nbsp;/* because we remove the default appearance, we need to specify how we want it to appear */ &nbsp;&nbsp;&nbsp;&nbsp;width: 10px; &nbsp;&nbsp;&nbsp;&nbsp;height: 10px; &nbsp;&nbsp;&nbsp;&nbsp;border-radius: 50%; /* make it a circle for example */ &nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid grey; } .direct-styled:checked{ &nbsp;&nbsp;&nbsp;&nbsp;background-color: red; } /* note I haven't replicated the checkmark, but you can do that by styling the :before or :after pseudoelements and adding content */ The reason the appearance none method is preferrable to the complex html constructions it that this maintains the separation of responsibilities so that HTML is solely the content and CSS is the styling. This means that your HTML will be more legible as you will just see an input for your checkboxes instead of a complex nested html construction. Meanwhile your CSS will be about the same complexity.

Mike M. said: GiGs said: I'm not sure why adding your checkboxes didn't work. This should be fairly straightforward. Can you share the code you used? You might find the answers you need here: <a href="https://cybersphere.me/roll20/" rel="nofollow">https://cybersphere.me/roll20/</a> I remade the code, but it was essentially the code below with each checkmark input being added to the number input in the value, and each attr_horrorX following the input type checkbox for the one shown for attr-horror1: &lt;label for="attr_totalHorror"&gt;Total:&lt;/label&gt; &lt;input type="number" name="attr_totaHorror" value="@{attr_horror1}+@{attr_horror2}+@{attr_horror3}" disabled="true"&gt; &lt;input type="checkbox" name="attr_horror1" value="1"&gt; The problem here is you are using the attr_ part of names. That part exists just to tell roll20 it's an attr ibute name, and is never used anywhere else - not in html or JS, Try this instead: &lt;label for="attr_totalHorror"&gt;Total:&lt;/label&gt; &lt;input type="number" name="attr_totaHorror" value="@{horror1}+@{horror2}+@{horror3}" disabled="true"&gt; &lt;input type="checkbox" name="attr_horror1" value="1"&gt; Notice the attr_ part is still used where the checkbox is defined, That is the only place it is used (and must not be omitted from there).

Scott C. said: There's actually several ways to style checkboxes and radios now a days. Most of them are going to be more straightforward than the complicated html of hiding the checkbox and using another element to replicate it. If all you want to do is change the color of the checkbox background, use the accent-color css property If you want to do more complex styling like borders, shapes, custom content, etc; use the appearance css property. This property allows checkboxes and radios to be styled with the same freedom as divs. Those look like great things to test. Thanks, Scott.

GiGs said: This is the clearest guide I found on it: <a href="https://paulund.co.uk/how-to-style-a-checkbox-with-css" rel="nofollow">https://paulund.co.uk/how-to-style-a-checkbox-with-css</a> I just want to thank you, not only is the tutorial good, but the checkbox 6 looks like it will fit almost as is with a little resizing and putting it on an inline-block. It is working out so far in LiveServer.&nbsp;

Mike M. said: ... It is working out so far in LiveServer.&nbsp; Note, you should only test character sheets on Roll20. There are many unique aspects of character sheet development that cannot be easily replicated in another environment. The custom sheet sandbox is excellent for this, and my auto code uploader browser extension makes it easy to update the code that is served on the sandbox.

Scott C. said: Mike M. said: ... It is working out so far in LiveServer.&nbsp; Note, you should only test character sheets on Roll20. There are many unique aspects of character sheet development that cannot be easily replicated in another environment. The custom sheet sandbox is excellent for this, and my auto code uploader browser extension makes it easy to update the code that is served on the sandbox. Agreed.&nbsp; I followed the tutorial that wasn't roll20 specific in liveserver to make sure i was understanding the instructions before I tried put it into my sheet.&nbsp;&nbsp; On the other hand, your advice is where I'm going to go. I'll play with direct styling for fun, and maybe to improve aesthetics, but functionally, this is perfect.

The extra colours on the checkboxes are very nice.

Also this part: &lt;label for="attr_totalHorror"&gt;Total:&lt;/label&gt; That for should be pointing at an id, not the name (and definitely not including the attr_ part). That said, it looks irrelevant in this case - it doesn't look like the label does anything. (I don't generally use label elements: if it's just a heading, I use that.)

GiGs said: Also this part: &lt;label for="attr_totalHorror"&gt;Total:&lt;/label&gt; That for should be pointing at an id, not the name (and definitely not including the attr_ part). That said, it looks irrelevant in this case - it doesn't look like the label does anything. (I don't generally use label elements: if it's just a heading, I use that.) That's interesting.&nbsp; My sheet is riddled with labels for each attribute, using them for static text/ field headings. I've used headings only for section headings.&nbsp; Is there a potential consequence/ interaction for using for="attr_statname" in a label?&nbsp;

Mike M. said: Is there a potential consequence/ interaction for using for="attr_statname" in a label?&nbsp; There is probably no consequence. One of the big strengths of HTML is its fault tolerance - if something doesn't work properly, it just ignores it and it's as if nothing is there. But that also means that for statement is doing nothing. You can remove it and the sheet will be exactly the same. Many people use labels thinking they are, well, labels, and not realising they are for a specific purpose in HTML (they are form elements, a thing that doesn't work on Roll20). Roll20 has added support for for statements in labels when linked with checkboxes or radio buttons (the label has a for element, the checkbox or radio button has an identical id ). When these are linked this way, you can click the label and it is treated as if you clicked the checkbox or radio. The label does nothing other than that (but one thing that is sometimes handy - it doesn't have to be anywhere near the checkbox or radio it is linked to). Generally, I think you (the general you, not you specifically) are better off replacing labels with headings or with spans formatted in a certain way, and just skip labels entirely, unless you want to take advantage of the one thing they do. However, that is just general advice - you already have a sheet with lots of labels you so you may as well keep them. It would be a lot of work to replace them and reformat whatever goes in their place. However, there is no harm in removing any unused for statements in those labels - they aren't doing anything, and the sheet will be slightly more efficient with them removed.

A slight clarification. Form elements do actually work on sheets (the sheet is really just an html form element). Labels are finicky in Roll20 though. We can only use HTML IDs in non repeating sections (because IDs have to be unique on a page, and repeating sections repeat them), but in non repeating sections you can use labels as normal: &lt;label for="my-input"&gt;Some text&lt;/label&gt; &lt;input id="my-input" name="attr_my_input" type="text"&gt; and clicking on the label will be the same as clicking on the input (check it if it's a checkbox/radio, move the cursor into it if it's a textarea, number, etc). Or you can nest your label text and the input in the label to get the same behavior (useful if you want labels in repeating sections). &lt;label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;Some text&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input id="my-input" name="attr_my_input" type="text"&gt; &lt;/label&gt; Both of these are good things to do from an accessibility standpoint as many people have trouble interacting specifically with small elements like checkboxes/radios. Additionally, it will make your sheet easier to interact with if someone attempts to use it on a touchscreen device.

Scott C. said: A slight clarification. Form elements do actually work on sheets (the sheet is really just an html form element). Outside of roll20, form elements are usually used as an interface to javascript to modify the DOM. Those things are definitely not possible on roll20. I could have been more precise.