How can i still check a checkbox even though it's display value is set to none?-CodePudding

So I've watched a tutorial and discovered that to make customizable checkboxes what you do is basically: you put a div box after the actual input element, you disable the display value(set it to none) for the actual input element then you style the div box instead of the actual input element with the help of some pseudo-classes and pseudo-elements. although it completely works I'm unable to understand how exactly it works I've got questions like:

Since we set the display value of the actual checkbox input to "none" then how are we still able to check it?
When I change the element with the class "checkbox"(sort of like a container) label to div everything completely breaks why does this happen?
I've made a little animation to bulge the fake checkbox and then go back to the original size again when it's checked I want to do the same thing to the label which is the parent for both the real and fake checkboxes but as far as I know there isn't a way to select parent elements in CSS how can I fix this?

Here is the link to the tutorial in case you need it.

Here is my CSS and HTML codes:

.checkbox{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 50px;
    cursor: pointer;
}
.checkbox_Input{
    display: none;
}
.checkbox_Box{
    width: 1.25em;
    height: 1.25em;
    border: 2px solid rgb(189, 189, 189);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.checkbox_Box::after{
    content: "\2714";
    color: #ffffff;
    font-size: small;
    transform: scale(0);
    transition: transform 0.4s;
}
.checkbox_Input:checked   .checkbox_Box{
    background: #2266dc;
    border-color: #2266dc;
    animation: AnimateChecked 0.5s ease-in;
}
.checkbox_Input:checked   .checkbox_Box::after{
    transform: scale(1);
}
@keyframes AnimateChecked{
    50% {
        width: 1.5em;
        height: 1.5em;
    }
    100%{
        width: 1.25em;
        height: 1.25em;
    }
}

<!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">
    <link rel="stylesheet" href="checkbox.css">
    <title>CheckBox</title>
</head>
<body>
    <label class = "checkbox" for="MyCheckBox">
        <input class = "checkbox_Input" type="checkbox" id="MyCheckBox">
        <div ></div>
        Yes, Check The Checkbox
    </label>
</body>
</html>

CodePudding user response：

I think reading about the label element will give you better understanding of that element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

The label element is bound to the checkbox via the for attribute. When you click the label it triggers the checkbox although it is hidden.
Again, the label element is a programmatically associated with the form elements (the checkbox in your case). If you change it to div it will lose its ability to bind with the form element.
For your last question I would just add the animation to the parent element (label) or wrap the text with an inline element (i.e. span) and add an animation to it as well.