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't really get a focus from a label since it is not a focussable element. See BoltClocks answer here : Anyway to have a label respond to :focus CSS

Answer 2

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.

Answer 3

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;
}

Answer 4

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/