-
-
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> |
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.
thx , for this code.