I am currently working on developing a custom CSS design for checkboxes to match the specifications provided by the designer. The checkboxes need to be circular with a radius of 60px, and the label should be centered within the circle. Additionally, when the checkbox is checked, the background color should change to red.
Here is the progress I have made so far: http://codepen.io/anon/pen/qdrQbV
Below is the code :
HTML
<div class="mybox">
<input type="checkbox" value="None" id="sth" name="check" checked />
<label for="sth">
<span>
Test
</span>
</label>
</div>
CSS
.mybox {
width: 120px;
position: relative;
margin: 0;
padding:0;
label {
color: #000;
width: 120px;
height: 120px;
padding:0;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 120px;
border-radius: 50%;
border: 2px solid black;
&:after {
box-sizing: border-box;
content: '';
width: 120px;
height: 120px;
position: absolute;
top: 0px;
left: 0px;
border: 2px solid red;
background: red;
opacity: 0;
border-radius: 50%
}
}
input[type=checkbox] {
visibility: hidden;
&:checked + label:after {
opacity: 1;
}
}
}
The current outcome is close to meeting expectations, but there is an issue with the caption being obscured by the red overlay. I am seeking suggestions to resolve this problem.
Any insights or ideas would be greatly appreciated! Thank you!