[Help] Custom CSS checkboxes without ID selector

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: &lt;input type="checkbox"checked='true' name="Force1" id="Force1" /&gt;&lt;/label&gt;&lt;label for="Force1"&gt;&lt;/label&gt; &lt;input type="checkbox"checked='true' name="Force2" id="Force2" /&gt;&lt;/label&gt;&lt;label for="Force2"&gt;&lt;/label&gt; 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( <a href="http://csscheckbox.com/checkboxes/u/csscheckbox_d38cca4b67a7029d62498ff7c68d08fb.png" rel="nofollow">http://csscheckbox.com/checkboxes/u/csscheckbox_d38cca4b67a7029d62498ff7c68d08fb.png</a> ); -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 :&gt; Thanks

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 &nbsp;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.

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.