How to display the check mark when choosing the checkbox? - html

Question

I have a checkbox and I changed the checkbox style in a circle. Now I need when the user chooses the checkbox then I have to display the check mark.
If I remove -webkit-appearance: none; then I am getting it but my css not working.
How can I do this?
.checkbox_round {
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
outline: none;
cursor: pointer;
-webkit-appearance: none;
}
.checkbox_round:hover {
border-color: #000;
}
.checkbox_round:checked {
background-color: #f00;
}
<label><input type="checkbox" name="name1" value="1" class="checkbox_round"> check box1 </label>
<label><input type="checkbox" name="name2" value="2" class="checkbox_round"> check box1 </label>
<label><input type="checkbox" name="name3" value="3" class="checkbox_round"> check box1 </label>

Answer 1

You could make a checkmark using CSS or just use a unicode checkmark. You can also just add an image, which has already been suggested.
Here are the first two possible ways:
.checkbox_round {
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
outline: none;
cursor: pointer;
-webkit-appearance: none;
}
.checkbox_round:hover {
border-color: #000;
}
.checkbox_round {
position: relative;
}
.checkbox_round:checked {
background-color: #f00;
}
.checkbox_round:checked:before {
content: "✓";
left: 3px;
top: -2px;
position: absolute;
}
.checkbox2:checked:before {
content: "";
border: 1px solid black;
border-width: 1px 1px 0 0;
height: 5px;
width: 13px;
position: absolute;
transform: rotate(135deg);
left: 3px;
top: 2px;
}
<label><input type="checkbox" name="name1" value="1" class="checkbox_round"> check box1 </label>
<label><input type="checkbox" name="name2" value="2" class="checkbox_round checkbox2"> check box1 </label>

Answer 2

You can use a background image. I suggest you an svg.
.checkbox_round {
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
outline: none;
cursor: pointer;
-webkit-appearance: none;
}
.checkbox_round:hover {
border-color: #000;
}
.checkbox_round:checked {
background-image: url(https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-check-mark-1.png);
background-size: 50%;
background-position: center center;
background-repeat: no-repeat;
}
<label><input type="checkbox" name="name1" value="1" class="checkbox_round"> check box1 </label>