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

Fiddle: http://jsfiddle.net/h6NNs/

Change from :focus to :hover.

Resulting CSS should be:

form label {
    font-size: 23px;
}

#box {
    width: 0px;
    visibility: hidden;
    opacity: 0;

    -webkit-transition: 200ms;
    -moz-transition: 200ms;
    -ms-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;        
}

#box:hover{
    visibility: visible;
    opacity: 1;    
    width: 50px;
}