Dhanuka777 Dhanuka777 - 2 months ago 29
HTML Question

CSS3 Fontawesome checkbox click event

I was looking for a pure CSS based checkbox solution and came across following codepen code -

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

/*** basic styles ***/

body { margin: 30px; }
h1 { font-size: 1.5em; }
label { font-size: 24px; }
div {
width: 175px;
margin-left: 20px;

/*** custom checkboxes ***/

input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
font-family: FontAwesome;
display: inline-block;

input[type=checkbox] + label:before { content: "\f096";
letter-spacing: 10px;
} /* unchecked icon */

input[type=checkbox]:checked + label:before { content: "\f046";
letter-spacing: 5px;
} /* checked icon */

Issue is that I cannot check/uncheck, click event on checkbox does not change the checkbox styles. In styles it hides the checkbox (display set to none), how does check event work in this?

When I set the checkbox display to block and check/uncheck it changes styles.


You don't check/un-check by clicking on the checkbox, you do it by clicking on the label in this case. In CSS/HTML, the label is basically an extension of whatever input it's linked to. So as far as your browser is concerned, clicking the label (your icon) is the same thing as toggling the checkbox.

See here for more information about labels