Simulating the Apple.com Search stretch with CSS3 transitions

I am trying to recreate the apple.com stretchy search box on focus. I have got it working but mine stretches the background image where as their's seams to gracefully add to it without the magnifying glass开发者_开发技巧 stretching. Also they have managed to fade one background into another.

Here is my CSS

#header input {
    background:url(http://www.golfbrowser.com/images/icons/search.png) no-repeat top right;
    padding:2px;
    margin-top:8px;
    margin-right:10px;
    padding-left:18px;
    font-family:"Lucida Grande", Arial, sans-serif;
    font-size:12px;
    color:#222;
    border:0px;
    background-color:none;
    float:right;
    width:140px;
    background-size:160px 20px;
}
#header input:focus {
    background:url(http://www.golfbrowser.com/images/icons/search-z.png) no-repeat top right;
    transition: width 0.5s, background-size 0.5s, background 0.5s;
    -moz-transition: width 0.5s, background-size 0.5s, background 0.5s;
    -webkit-transition: width 0.5s, background-size 0.5s, background 0.5s;
    -o-transition: width 0.5s, background-size 0.5s, background 0.5s;
    width:180px;
    background-size:200px 20px;
}
#header input:blur {
    transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s;
    width:140px;
    background-size:160px 20px;
}

And for implementation see http://www.golfbrowser.com/

The background-color can be transitioned too if you add it in the list. As for the background image gecko2.0 based have a know issue and can only transition gradient images.

Hope this will help :)

I don't see your magnifying glass stretching at all. It looks fine to me in Chrome. Did you get this CSS where you wanted it to be?

Apple's code approach is slightly different from yours. They're using javascript to add the class "searchmode" to the nav element when the search box is focused. That allows them to resize/transition everything. An all-CSS approach is limited by the fact that pseudo-classes (indeed no CSS selector) are never going to affect parent elements or even siblings that precede the selected element in the DOM. The one behavioral difference that I see is that your box goes white on hover, and apple's box stays white until it's selected. I'm pretty sure you wanted it that way.

BTW, You can't transition background images, period. That includes background gradients. It's not a known issue, just a fact of the spec.