Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

[Help] Custom CSS checkboxes without ID selector

October 18 (9 years ago)
Fenelion
Sheet Author
Hi.

I'm new on html/css, and i'm making french sheet of Warhammer 3e ( wfrp ).
I'm making some customised checkboxes, made with csscheckbox.com :


big problem is : css code provided from csscheckbox.com use "id" selector, which is forbidden here.
When i'm trying to remove id from html code, i can't check/uncheck any case, and i dunno which selector use and which part of css i need to replace.

Here's an exemple, codes of blues checkboxes :
HTML:
<input type="checkbox"checked='true' name="Force1" id="Force1" /></label><label for="Force1"></label>
<input type="checkbox"checked='true' name="Force2" id="Force2" /></label><label for="Force2"></label>
CSS:
input[type=checkbox].css-checkbox-caracteristique {
position:absolute;
 z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); 
height:1px; width:1px; margin:-1px; padding:0; border:0;
}

input[type=checkbox].css-checkbox-caracteristique + label.css-label {
padding-left:30px;
height:25px;
display:inline-block;
line-height:25px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:25px;
vertical-align:middle;
cursor:pointer;
}

input[type=checkbox].css-checkbox-caracteristique:checked + label.css-label {
background-position: 0 -25px;
}
label.css-label {
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_d38cca4b67a7029d62498ff7c68d08fb.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
and here's a jsfiddle

Maybe some lines of this can be erased, but i don't wanna try, just in case :>

Thanks
October 18 (9 years ago)
Lithl
Pro
Sheet Author
API Scripter
Styling Checkboxes and Radio Buttons

Basically, the code you've gotten is styling a label and moving the checkbox offscreen, relying on the fact that the for attribute of a label element links it with the input element using the associated id attribute. However, because characters sheets are duplicated on the page for each character in the campaign, id attributes are useless.

The checkbox styling method I show off in the CSS Wizardry thread is similar in that I'm styling an element other than the actual checkbox. But instead of moving the checkbox offscreen and relying on the link created by a label, I'm just making the checkbox invisible, sitting on top of the element you're seeing, so you can still click on it.
October 18 (9 years ago)
Fenelion
Sheet Author
I replaced this CSS for yours, it worked well, i also tried " fill radio " for red and green gauge on the screen ( were checkboxes ), just perfect, thanks a lot.