Menu
I've gotten an idea to make a search "button" upon clicking which the input box would show up and stretch. However instead of using an invisible checkbox I decided to try and use the label since clicking the label would put focus on the element the label is connected to. And while giving focus and doing basic transformations do work, I can't seem to hide/show the textbox either using visibility: hidden/visible or display: none/inline-block. And I don't want to just rely on opacity since the textbox can be found/clicked even while it's hidden.
Current attempt: JsFiddle
Why doesn't this work? What am I doing wrong?
822
There is a button to toggle the visibility ( display ) of the focusable element, but before showing the element, it attempts to programmatically focus it. Focusing a display:none element is not expected to work, but the issue is what follows. Once the element is shown, no future attempt to focus the element will work.
Your answervisibility:hidden- It is not visible but gets up it's original space whereas, display:none- It is hidden and takes no space.
Display none don't reduce the size of the dom, just make the element not visible, like visible hidden, without occupies the visual space. Display none don't improve the performance because the goal of virtual scrolling is reduce the number of the elements into the dom.
You cannot normally focus li elements. But you can hover them, so you should use li:hover instead of li li:focus .
Elements that are not visible cannot receive focus, therefore the :focus psuedo-class cannot apply.
Using width and opacity seems to produce a reasonable effect.
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
