Checkbox + label with custom background image does not work in a repeating section

Hello!

I wanted to have a custom background image used for checkboxes. I have achieved it this way

Then when I use it, It works

but when I apply the same to a checkbox in a repeating section, it does not work. It is unclickable. BUT it does display the background image AND reflects whether it is checked or unchecked. You only can't click it to change it

Why doesn't it work in the repeating section? I have tried changing the id but that did not work. Alternatively, do you have a different way to get a background image applied to the checkbox?

My guess would be the fact you are using labels, AFAIK only inputs or spans are officially only supported for attributes, not labels.

I'm surprised it works outside the repeating section, honestly, but inside a repeating section there's some behind the scenes stuff going on to construct a more elaborate attribute name and labels might not be being recognised.

I suggest seeing if you can produce a similar effect without using a label.

I was going to say the same thing as GiGs, actually.  I can say, my approach has been (using labels), something like:

<label class="whatever"><input type="checkbox" name="attr_somethign" value="1"><span class="whatevercheck"></span></label>

Then in the CSS I give the checkbox an opacity, height, and width of 0, and I change the span according the value of the checkbox.

The problem is likely related to using IDs to connect the label and checkbox for clickability. IDs have to be unique, and they cannot be unique when used in a repeating section. Additionally, you are setting your labels width and height to 100%, which will set them both to take up the entire width of your language div. This is probably causing some sort of issue when you have two of them in the same div. I'd probably recommend using just a checkbox to do this:

CSS

.charsheet input[type=checkbox] {
  -webkit-apperance: none;/*Appearance attribute for webkit browsers, specifically Safari*/
  appearance: none;/*Removes the default checkbox appearance and allows us to style them as any other element*/
  background-repeat: no-repeat;
  background-size: contain;
  height: 2rem;/*I'd suggest applying an actual width and height here.*/
  width: 2rem;
  display: inline-block;
  padding: 0;
  border:0px solid;
}
.charsheet input[type="checkbox"]:focus{/*Removes the thick border that appears after clicking on a checkbox*/
  outline:0px solid;
  outline-offset:0;
} 

.charsheet input[type=checkbox]:not(:checked){
  background-image: url(https://i.imgur.com/MwSmZ5e.png);
}

.charsheet input[type=checkbox]:checked{
  background-image: url(https://i.imgur.com/2BwJ5MM.png);
}

HTML

<input type="checkbox" name="attr_somethign" value="1">

Edited to change recommendation

Edit 2: You may already be planning to do this, but I'd recommend hosting your images on somewhere other than imgur. It's a method that has caused issues for other sheets when the image gets removed from there. The ideal method is to store the image in the sheet's directory on the Roll20 repo, although you can't do that until you've actually pushed something to the repo, which does make a chicken and egg dilemma.

Thank you for your help
I am aware of the image issue and once it is pushed I will replace the links with images from the repo. But this will do in the meantime for testing.