dimanche 2 mai 2021

Styling checkboxes issue

I was just learning how to style checkboxes in CSS from Web Dev Simplified, but it seems, that something is not working right in my browser. I just used the code from his GitHub to make sure, and the issue still occurs. The thing is when I hover over a second or a third label, two out of three checkboxes are changing color (instead of one, as it should be). The line that seems to cause the problem is the one after the comma:

.checkbox-container label:hover::before,
.checkbox-container input[type='checkbox']:hover + label::before {
    background-color: rgb(58, 231, 110);
}

I mean, after I'm adding ", .checkbox-container input[type='checkbox']:hover + label::before", the issue starts to occur. Is there maybe a problem with this code, or does my browser need some repairs, so it works right again?

The full code is available here: https://github.com/WebDevSimplified/css-tutorials/tree/master/Simple%20Custom%20Checkbox

Edit: Moreover I just found out, that when I click on any label, only the first checkbox is getting checked. Really weird stuff.




Aucun commentaire:

Enregistrer un commentaire