[Solved] how to use a checkmark as a checkbox in css [closed]

by


Customizing checkboxes is hard and requires a checkbox first.

You will need a checkbox to hold the value of the check. And you will need to style the label, and hide the checkbox, so that you will only see the label, and this label will be able to interact with the checkbox.

Try this instead : 

.checkmark {
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

input[type="checkbox"] { display: none; }

.checkmark:before {
    content: '';
    position: absolute;
    width:3px;
    height:9px;
    background-color:#ccc;
    left:11px;
    top:6px;
}

.checkmark {
  cursor: pointer;
}

.checkmark:after {
    content: '';
    position: absolute;
    width:3px;
    height:3px;
    background-color:#ccc;
    left:8px;
    top:12px;
}

input[type="checkbox"]:checked + .checkmark:before,
input[type="checkbox"]:checked + .checkmark:after {
  background-color: green;
}
<input type="checkbox" id="cb">
<label for="cb" class="checkmark"></label>

2

solved how to use a checkmark as a checkbox in css [closed]