Checkbox

Details: Written by: Stanko Milosev; Category: CSS3; Published: 07 October 2015; Last Updated: 07 October 2015; Hits: 3816

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">
  test
  <div class="myCircle"></div>
</label>

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

with:

.myCheckbox:checked

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):

test