-
-
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> |
You should be able to — just put an image in the label and style it however you like.
I guess is better to use image in css and not in the markup(label)
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
to gillguy81:
you need to have a proper DOCTYPE declared. then it works in IE as well
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.
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.
Sorry, I made a mistake it is not :selected. it is :checked.
Anyone have any success getting this working on IE7-8?
If you're looking for a way to make CSS3 pseudo-classes work in IE6-8, try using selectivizr:
http://selectivizr.com/
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;
}
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") */
}
I created a demo with knockout, it works fine: http://jsfiddle.net/hM3s8/2/
thx , for this code.
i made an update with jquery 1.x and fontawesome,
check this out https://jsfiddle.net/kinggeneral/evo3z6Lm/
thank you, that was very helpful
The for attribute of a label should refer to the id of the checkbox, otherwise clicking the label does not toggle it.
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.
@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.
Have you been able to use this for image replacement?