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

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.