html - Why changing visibility/display on focus does not work?

Question

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?

Answer 1

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.