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](http://jsfiddle.net/6h8cF/2/)

Why doesn't this work? What am I doing wrong?

Answer: 
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.
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/>