Having trouble replacing images when clicked (new sheet creation)

Hello! I'm incredibly new to coding (picked it up explicitly to make a custom sheet on roll20), and am having some trouble with replicating some ideas I've found cool on other sheets -- namely, in this case, Blades in the Dark. The functionality I'd like to approach is how Blades uses their flags:&nbsp; when clicked, the flags change color to denote resources: It seems to me to be something along the lines of replacing one image with another when clicked -- my guess is the use of checkboxes. When I try to replicate this in order to better understand it, however, I can't succeed in hiding the original style of checkbox, which then sits next to the toggleable flag: I've been using CoffeeCup to compile/edit my code so far, and when viewing the results on it I don't see the checkbox.&nbsp; The code is as follows: (html side) &nbsp; &lt;label class="container"&gt; &nbsp; &nbsp; &lt;input type="checkbox"&gt; &nbsp; &nbsp; &lt;img class="img-unchecked"&nbsp; src="<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/xptooth-red.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/xptooth-red.png</a>" width="20px"&gt; &nbsp; &nbsp; &lt;img class="img-checked"&nbsp; &nbsp; src="<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/xptooth-white.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/xptooth-white.png</a>"&nbsp; &nbsp;width="20px"&gt; &nbsp; &lt;/label&gt; (css side) /* making the images smaller */ img[src*='xptooth-red'] { &nbsp; size:10px; } img[src*='xptooth-white'] { &nbsp; size:10px; } /* testing image swapping on button click */ .container { &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; caret-color: transparent; &nbsp; &nbsp; display: block; } .container input { &nbsp; display: none; } .img-checked { &nbsp; &nbsp; display: none; } /* If checked, show the checked image */ .container input:checked ~ .img-checked { &nbsp; &nbsp; display: inline; } /* If checked, hide the unchecked image */ .container input:checked ~ .img-unchecked { &nbsp; &nbsp; display: none; } Is there any way I can get this to work using roll20's peculiarities? Also, should I be trying to apply the css inline rather than on a separate, referenced document?&nbsp; both seem to work, but I'm not sure if one is better than the other when it comes to roll20. Thanks!

I don't know what coffecup is, and I'm not familair with the blades sheet, but I'll repeat something I've seen many times: when testing code for Roll20, you need to test it in Roll20. Outside websites lack a lot of the customizations that Roll20 uses, which can make some things seem to work but fail on Roll20. Luckily we have a very simple method to do this: The Custom Sheet Sandbox. Use that. For what you trying to do, your checkbox will need both a name and a class. &lt;input type="checkbox"&gt; should be something like &lt;input type="checkbox" name="attr_checkbox1" class="img-test"&gt; The name will need be unique, the class doesn't need to be. That's just the starting point. The value of the checkbox isn't saved (and doesn't even exist) in Roll20 if it doesn't have a name, and the class is used in the CSS to show of hide the image.

I'll also point out that for most custom checkboxes (I want to say all, but being absolute is bad), you don't even need the separate image. HTML &lt;input type="checkbox" name="attr_checkbox1" value="1" class="img-test"&gt; CSS .img-test{ appearance: none; /*Allows us to customize the appearance of the checkbox or radio. DOES NOT work on any other input type*/ border: 1px solid black; background-color:white; height: 40px; width:20px; } .img-test:checked{ background-color: red; } That will make a basic rectangular checkbox. For more complex shapes, you can use the clip-path css property and the before or after pseudo-elements to create very complex shapes (and even animate a changing of the shape depending on the check state).

Scott C. said: I'll also point out that for most custom checkboxes (I want to say all, but being absolute is bad), you don't even need the separate image. HTML &lt;input type="checkbox" name="attr_checkbox1" value="1" class="img-test"&gt; CSS .img-test{ appearance: none; /*Allows us to customize the appearance of the checkbox or radio. DOES NOT work on any other input type*/ border: 1px solid black; background-color:white; height: 40px; width:20px; } .img-test:checked{ background-color: red; } That will make a basic rectangular checkbox. For more complex shapes, you can use the clip-path css property and the before or after pseudo-elements to create very complex shapes (and even animate a changing of the shape depending on the check state). Thanks for the reply! tried this, for whatever reason rather than fully replace the checkbox it leaves a miniscule version of the old checkbox where the new one should be.

GiGs said: I don't know what coffecup is, and I'm not familair with the blades sheet, but I'll repeat something I've seen many times: when testing code for Roll20, you need to test it in Roll20. Outside websites lack a lot of the customizations that Roll20 uses, which can make some things seem to work but fail on Roll20. Luckily we have a very simple method to do this: The Custom Sheet Sandbox. Use that. For what you trying to do, your checkbox will need both a name and a class. &lt;input type="checkbox"&gt; should be something like &lt;input type="checkbox" name="attr_checkbox1" class="img-test"&gt; The name will need be unique, the class doesn't need to be. That's just the starting point. The value of the checkbox isn't saved (and doesn't even exist) in Roll20 if it doesn't have a name, and the class is used in the CSS to show of hide the image. Thanks for the reply.&nbsp; Testing using the sandbox now, and added class and name id to the checkbox.&nbsp; Attempting to hide the checkbox using either failed, and "appearance:none;" simply made the checkbox miniscule.&nbsp; Any idea why this is?