Multiple fake check boxes?

Hi all, new to the forums here.  Long time gamer and quasi programmer, looking for some help.  I'm working on character sheets for HarnMaster and the upcoming release of High Colonies (both from Columbia Games),  I think I've figured out most things but I've hit a road block with stylized fake check boxes.  I'm using code from the CSS Wizardry page that looks like this: /* Fake checkbox */ input[type = "checkbox" ] + span::before { margin - right: 4px; line - height: 14px; text - align: center; display: inline - block; vertical - align: middle; content: "▼" ; width: 14px; height: 14px; font - size: 12px; } input[type = "checkbox" ]:checked + span::before { content: "►" ; } I'd like to have more than one style, I'm using the lock unlock Pictos ( and ) but would like to use others as well the Gear, Pictos y, and perhaps some others.  I've tried several things, but not quite sure how to do that.  What is the current best practice for multiple kinds of fake check boxes?  thanks.  

You would generally have a different class for the different types. So maybe something like: .options:checked + span::before { content: "y" ; }

Thanks Spren, tried that.  Still getting the lock.... < input type = "checkbox" class = "sheet-skill-detail-show options" />< span ></ span > input [ type = "checkbox" ] + span::before { margin-right : 4px ; line-height : 14px ; text-align : center ; display : inline-block ; vertical-align : middle ; font-family : pictos; content : "(" ; width : 14px ; height : 14px ; font-size : 12px ; } input [ type = "checkbox" ] :checked + span::before { content : ")" ; } .options + span::before { content : "y" ; font-family : pictos; } .options:checked + span::before { content : "y" ; font-family : pictos; } input.sheet-skill-detail-show:not ( :checked ) ~ div.sheet-skill-detail { display : none ; } What am I missing? 

Did you update the html to have the new class? It helps if you post the relevant html too.

Yes it's the first line in the previous post. 

Is the 'options' class being prefixed with 'sheet-' and thus not applying correctly?

I've tried it several ways as .sheet-options in the css and options in the html and sheet-options in the html as well as .options in the css and options in the html.  

If I'm looking at this right, you have multiple classes on the single checkbox and your doing content calls on all those classes. The most specific one is the one that will override everything. I'm going to guess you are getting the ( and the ) and not the y, correct? How are you going to determining which style is used?

Finderski, Thank you!  That's the ticket.   HTML: < input type = "checkbox" class = "sheet-physical-skills-block-switch lock" name = "attr_physical_skills_block_switch" value = "1" />< span class = "icon-lock" ></ span > and < input type = "checkbox" class = "skill-detail-show gear" />< span ></ span > with CSS: /* Fake checkbox */ input [ type = "checkbox" ] + span::before { margin-right : 4px ; line-height : 14px ; text-align : center ; display : inline-block ; vertical-align : middle ; font-family : pictos; width : 14px ; height : 14px ; font-size : 12px ; } .sheet-lock + span::before { content : "(" } .sheet-lock:checked + span::before { content : ")" } .sheet-gear:checked + span::before { content : "y" ; } .sheet-gear + span::before { content : "y" ; } input.sheet-skill-detail-show:not ( :checked ) ~ div.sheet-skill-detail { display : none ; } Is doing exactly what I want... I had to separate the content from the fake checkbox class indicators.  Thanks.... 

JPM said: Finderski, Thank you!  That's the ticket.   Glad it helped. :)