Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
@hootsieroll

This comment has been minimized.

Copy link

hootsieroll commented Aug 25, 2011

Have you been able to use this for image replacement?

@arbales

This comment has been minimized.

Copy link
Owner Author

arbales commented Aug 25, 2011

You should be able to — just put an image in the label and style it however you like.

@parkerproject

This comment has been minimized.

Copy link

parkerproject commented Jan 2, 2012

I guess is better to use image in css and not in the markup(label)

@gillguy81

This comment has been minimized.

Copy link

gillguy81 commented Apr 30, 2012

Hi this is not working in IE 8 7 can you help me what things i need so that it works in the ie as well

@Aelerion

This comment has been minimized.

Copy link

Aelerion commented Jul 8, 2012

to gillguy81:
you need to have a proper DOCTYPE declared. then it works in IE as well

@delatroy

This comment has been minimized.

Copy link

delatroy commented Sep 19, 2012

Are you sure? I also have the same issue in IE7 and 8 and tried many different DOCTYPES.

Please specify which DOCTYPE you are referring to.

@iboware

This comment has been minimized.

Copy link

iboware commented Oct 22, 2012

IE7 and 8 does not support :selected pseudo selector so you cannot use it. If you want to use, you have to write some javascript.

@iboware

This comment has been minimized.

Copy link

iboware commented Oct 22, 2012

Sorry, I made a mistake it is not :selected. it is :checked.

@michaelryancaputo

This comment has been minimized.

Copy link

michaelryancaputo commented Jun 26, 2013

Anyone have any success getting this working on IE7-8?

@vfonic

This comment has been minimized.

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

This comment has been minimized.

Copy link

travisjtodd commented Aug 15, 2013

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

This comment has been minimized.

Copy link

jupitercow commented Sep 1, 2013

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

This comment has been minimized.

Copy link

jaider commented Nov 12, 2013

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

@jglantonio

This comment has been minimized.

Copy link

jglantonio commented Oct 3, 2016

thx , for this code.

@KingGeneral

This comment has been minimized.

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

This comment has been minimized.

Copy link

dom-void commented Mar 30, 2017

thank you, that was very helpful

@jornvandebeek

This comment has been minimized.

Copy link

jornvandebeek commented Sep 1, 2017

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

@wenceslawus

This comment has been minimized.

Copy link

wenceslawus commented Nov 7, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.