Skip to content

Instantly share code, notes, and snippets.

@arbales
Created September 22, 2010 19:29
Show Gist options
  • Save arbales/592332 to your computer and use it in GitHub Desktop.
Save arbales/592332 to your computer and use it in GitHub Desktop.
<html>
<head>
<title>Checkbox</title>
<style>
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label
{
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
</style>
</head>
<body>
<p>
<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>
</body>
</html>
@vfonic
Copy link

vfonic commented Aug 10, 2013

If you're looking for a way to make CSS3 pseudo-classes work in IE6-8, try using selectivizr:
http://selectivizr.com/

@travisjtodd
Copy link

Using pseudo elements doesn't leave you with a tiny label:

input[type="checkbox"] { display: none; }
input[type="checkbox"] + label:before {
    content: "";
    background: #999;
    height: 16px;
    width: 16px;
    display: inline-block;
    padding: 0 0 0 0px;
}   
input[type="checkbox"]:checked + label:before {
    content: "";
    background: #0080FF;
}

@jupitercow
Copy link

Updated pseudo elements to add an "x" when checked. And using body:nth-of-type to hopefully make sure these only affect browers that support it.

body:nth-of-type(1) input[type="checkbox"] { display: none; }
body:nth-of-type(1) input[type="checkbox"] + label:before {
    content: "\00a0"; /* character: space */
    background: #999;
    height: 16px;
    width: 16px;
    display: inline-block;
    font-size: 14px;
    line-height: 16px;
    margin-right: 10px;
    padding: 0 0 0 0px;
    text-align: center;
}   
body:nth-of-type(1) input[type="checkbox"]:checked + label:before {
    content: "\00D7"; /* character: "times" symbol (and "x") */
}

@jaider
Copy link

jaider commented Nov 12, 2013

I created a demo with knockout, it works fine: http://jsfiddle.net/hM3s8/2/

@jglantonio
Copy link

thx , for this code.

@KingGeneral
Copy link

KingGeneral commented Nov 11, 2016

i made an update with jquery 1.x and fontawesome,
check this out https://jsfiddle.net/kinggeneral/evo3z6Lm/

@travisjtodd @jupitercow @jaider

@dom-void
Copy link

thank you, that was very helpful

@jornvandebeek
Copy link

The for attribute of a label should refer to the id of the checkbox, otherwise clicking the label does not toggle it.

@v-bezborodov
Copy link

I faced problem with LABEL FOR in case of dynamically generating content. Adding pair LABEL FOR+ INPUT doesn't work correctly due of all the generated blocks are contains LABELS with same id. So we have to use another identifier for LABEL instead of id. In other words that way doesn't fit for dynamically generated content.
7cefdf97a7

@Moonbird-IT
Copy link

@v-bezborodov sorry for gravedigging but I think that's important to keep in mind: IDs are not meant to be duplicate anywhere in the same document. They are like fingerprints and shouldn't be present on different peoples' hands.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment