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

you can use opacity only, visibility:hidden or display:none; are not suppose to allow focus (IMHO), since element are not visible.

form label {
    font-size: 23px;
}

#box {
    width: 0px;
  opacity:0;
    -webkit-transition: 200ms;
    -moz-transition: 200ms;
    -ms-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;        
}

#box:focus {
   opacity:1;
    width: 50px;
}

http://jsfiddle.net/6h8cF/7/