Kevin Powell - Community•9mo ago

How does the input checkbox work if it's hidden?

Here you can see from https://youtu.be/1TZjgQ0Osic 6:30, he creates that hamburger button, he hides the input, and then he uses css selectors to "use" that hidden input element in order to toggle the sidebar, how does that work?

WebKitCoding

YouTube

Sidebar Navigation Menu With Animated Toggle Bar Using HTML And CSS...

In this video, I will create a Sidebar navigation/navbar bar with Animated Hamburger Toggle Menu just Using HTML And CSS, which you can see as animated like hamburger menu bar when you click on button/bar icon and after click icon will changed from menu bar to cross or cancel bar and you will also see in this tutorial that how i created a menu t...

6 Replies

ἔρως•9mo ago

honestly, there are better ways to do this, but this works on a pinch the idea is simple: use a label with the for attribute to toggle a checkbox just because it's hidden, doesn't mean it won't be toggled and then, you use the :checked pseudo-class to style the element right after you can see it at ~10:12 but in this case, it's a menu that slides from the left to the right

Harun•9mo ago

How does it get clicked i don't understand, it's not there, and we are actually clicking another div with .toggle class and that input above gets activated?

ἔρως•9mo ago

you see the label, at 6:39? that label will check/uncheck the input it doesn't need to be visible to be checked it just must exist in the document

Zakum•9mo ago

The two ways to use <label>.

<label>
  <input type="checkbox">
  This label toggles the checkbox
</label>

<label>
  <input type="checkbox">
  This label toggles the checkbox
</label>

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">This label toggles the checkbox</label>

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">This label toggles the checkbox</label>

Label is an inline element so only put other inline elements (not block level elements) inside. Do not put a label inside a label. The video incorrectly puts a <div> (a block-level element) inside the label--this is not semantic HTML according to the spec. Note that depending on the one you choose, your styling options may differ, as firefox still does not support :has(). Another issue in the video is using display: none on the input. This is an accessibility concern and may cause problems for users who rely on screen readers. The proper way to "hide" things with CSS while maintaining accessibility features is with the following class.

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

This will ensure that the element is not visible, but still present and usable for people using assistive technologies. Keep in mind you have to add styling for focus and hover states to another element as a result (i.e. the corresponding <label>). @Harun

Harun•9mo ago

Absoloutely amazing explanation thank you guys very much

ἔρως•9mo ago

a much better way to hide it is to do not hide it at all you can use clip-path to make the checkmark or, in this case, the hamburger menu icon if you use the 2nd approach, you can make it work even in browsers without :has support

Gaming

Programming

How does the input checkbox work if it's hidden?