CSS - CHECKBOX v.1

============================
======== CSS - CHECKBOX  v.1 - POSTé
============================

CSS - CHECKBOX
== http://css-tricks.com/the-checkbox-hack/
== ADD THEM - with GM - https://www.google.fr/search?q=add+checkbox+to+links+greasemonkey&ie=utf-8&oe=utf-8&rls=org.mozilla:fr-FR:official&client=firefox-a&gws_rd=cr


============================
===========  CSS Checkbox hack
== http://tympanus.net/codrops/2012/12/17/css-click-events/
== http://tympanus.net/Tutorials/CSSClickEvents/index.html (example)
Clicking on the label will check a hidden checkbox.
Once checked, the elements with the .to-be-changed class will become red.

Re-clicking the label will uncheck the checkbox, restoring the default color of the .to-be-changed elements.

==Checkbox hack

Aaaaah, the checkbox hack. What a thing my friends! I’m sure you’ve all heard about the checkbox hack before.
It’s probably the most common way to handle a click event in CSS. It relies on, well, a checkbox.

What’s cool about a checkbox is the fact that it’s binary. It’s either checked or not checked.
There is no “half-way” checked. This is why the checkbox hack is
a pretty reliable way to trigger a click event in CSS. Let’s make an example.
How it works

The HTML

<input type="checkbox">
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>

The CSS

.to-be-changed {
	color: black;
}

input[type=checkbox]:checked ~ .to-be-changed {
	color: red;
}

As you can see, it relies on the :checked pseudo-class and on the general sibling selector ~.
Please note that it also works like a charm with the adjacent sibling selector +.
Basically, it says “if the checkbox is checked, then the following elements with the .to-be-changed class will be red”.

Okay, a checkbox isn’t very sexy, but you can totally make something nicer by hiding
the checkbox and binding a label to it. Something like this maybe:

<input type="checkbox" id="toggle">
<label for="toggle">Click me!</label>
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>

So we hide the checkbox and use the label to trigger the click event.

input[type=checkbox] {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

label {
	display: block;
	background: #08C;
	padding: 5px;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 2px;
	color: white;
	font-weight: bold;
}

input[type=checkbox]:checked ~ .to-be-changed {
	color: red;
}

This way, you have some kind of button triggering the color change on the paragraph.
Isn’t that cool? Re-clicking on the button is switching the color back to black of course.

(Note that there are different possibilities for hiding the checkbox, the most obvious of all being display:none.)