HTML
<div class="select">
<div>
<label for="kitty" class="kitty-label kitty-label-1 l-center">
</label>
<input type="checkbox" name="cats" value="1">
<label>Kitty One</label>
</div>
<div class="cly-pam" style="width:50%; float: left">
<label for="kitty" class="kitty-label kitty-label-2 l-center">
</label>
<input type="checkbox" name="cats" value="2">
<label>Kitty Two</label>
</div>
</div>
<div>
css
label{
cursor: pointer;
}
.kitty-label{
position: relative;
width: 100%;
&:hover,
&:focus,
&:active{
border-radius: 6px solid #fff;
}
}
.kitty-label-1{
display: inline-block;
background: url(../img/kitty1.png) no-repeat 0 0;
height: 142px;
width: 142px;
}
.kitty-label-2{
display: inline-block;
background: url(../img/kitty2.png) no-repeat 0 0;
height: 144px;
width: 144px;
}
.select input[type="checkbox"]{
display: none;
&:checked + label:before{
background: url(../img/tick.png) no-repeat;
}
}
The labels should have a background image, but there seems to be an issue where the border-radius does not appear behind the images when focused, active, or hovered. Additionally, the kitty images do not have rounded edges. Could using an image in a circle shape or applying CSS3 help achieve this?
Furthermore, the checkbox does not seem to show the tick or any indication of being checked. When clicking on the label (containing the kitty image), the tick does not appear. Can someone provide insight into what might be going wrong here? Any help would be greatly appreciated.
Updated
<div>
<input type="radio" name="type" value="designer" id="designer">
<label for="designer" id="designer" class="inline-block testsign" style="background: url(../img/face.png) no-repeat center;">
</label></div>
CSS
.testsign{
width: 170px;
height: 170px;
border-radius: 100%;
&:hover,
&:focus,
&:active{
border: 15px solid #f3f3f3;
}
}
// [type="radio"]:not(:checked),
// [type="radio"]:checked {
// visibility: hidden;
input[type="radio"]:checked + label:after {
content:"";
display: block;
position: absolute;
height: 60px;
width: 60px;
background: #f0f1f1 url(../img/tick.png) no-repeat center center;
border-radius: 100%;
border: 10px solid #fff;
}
An attempt was made using the example provided by @misterMan
I couldn't manage to position the label:after element at the bottom right corner as desired. I tried using top and left properties to position the tick circle, but encountered the issue that when checked, it would always appear in the same position specified by top and left. Is there a way to position the tick circle correctly at the bottom right corner within each label when the radio button is checked?
Another challenge is that when hovering over the label with a border radius and background image, the tick circle (label:after) appears jumpy when the radio button is checked. How can this jumping behavior be prevented? I attempted adding absolute center positioning and relative positioning, but this caused the labels to extend beyond their container. Any insights or assistance would be highly appreciated.
Your help or feedback will be valued.