Help regarding checkbox I mean :checked pseudo class

HTML-CSS
1

Am I doing anything wrong in using
:checked ?

I want to make a multiplication sign but I don’t know why this transform isn’t working.

.checkbox:checked.custom-box::after{
    transform: rotate(45deg);
}

The HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nav Toggle</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <lable class="lable">
    <input type="checkbox" class="checkbox">
    <span class="custom-box"></span>
    </lable>
</body>
</html>

And THE CSS

body{
    display: grid;
    place-items: center;
    height: 100vh;
    background-image: url(img.jpg);
    background-size: cover;
}

.checkbox{
    background-color: #fff;
    position: relative;
    left: 2.75rem;
    bottom: 0.2rem;
    cursor: pointer;
    transform: scale(15,8);
    z-index: 0;
    opacity: 1;
}

.checkbox:checked.custom-box::after{
    transform: rotate(45deg);
}

.custom-box{
    display: inline-block;
    background-color: #ff0000;
    width: 10rem;
    height: 20px;
    position: relative;
    left: -50px;
    top: 0px;

}

.custom-box::after{

    content: "";
    width: 10rem;
    height: 20px;
    background-color: #ff0000;
    position: absolute;
    bottom: 1.8rem;
    left: 0px;
}

.custom-box::before{
    content: "";
    width: 10rem;
    height: 20px;
    background-color: #ff0000;
    position: absolute;
    top: 1.8rem;
    left: 0px;
}
2

You’re misspelling label and <label> needs a for attribute equal to the input’s id.

If you want to use a checkbox state to change a “hamburger” to an “X” remember that you hide the checkbox and transform the label contents.

Do you need a space between classes on your checkbox:checked line?

3

I did the following changes

and thank you so much for picking out these mistakes

but I did not get this

Do you mean this

.checkbox:checked .custom-box::after{
    transform: rotate(45deg);
}
4

since your .custom-box is not nested within your .checkbox, to properly select it you need to use either + or ~.
See more about CSS selectors on MDN

5

Yes. I wondered if you need to do it like that. Sorry, been very busy away from the computer today.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.