Example of input type checkbox, and checked behaviour.

Lets say that we have code like this:

<input type="checkbox" class="myCheckbox" id="myOnoffswitch">

<label class="myOnoffswitch-label" for="myOnoffswitch">
  <div class="myCircle"></div>

Then CSS looks like:

.myCircle {
    width: 10px;
    height: 10px;
    border: 1px solid #c0c0c0;
    border-radius: 50%;

.myCheckbox:checked + .myOnoffswitch-label .myCircle{
    color: red;
    border-color: red;

Here notice line:

 .myCheckbox:checked + .myOnoffswitch-label .myCircle



we actualy said which CSS to apply when checkbox is checked, and plus sign means which CSS to follow.

Live example (click on check box to see small cirlce in red):