Magnify search box similar to that on Apple.com

If you go to http://apple.com and click in the search box, you'll notice it grows/magnifies onfocus, and onblur it collapses back to it's original state.

I'm wondering if there's a jquery plugin or similar to do this job easily.

I don't want to use the JS that's on the Apple web开发者_运维百科site since it's not fully cross browser. I also don't have time to roll my own. If there's nothing prebuilt, that's ok, but if anyone knows of anything pre-made, I'd be very grateful.

search box like at apple.com without JS: http://www.kvadracom.com/en-projects-blog.html#1

It's been there a while, here's another SO post:

Mimic apple.com globalsearch input field with HTML and CSS

I guess you want something like this.It is working in IE,firfox,chrome.I didnt check for others

$('input').focus(function() {
         $(this).css({'width': '50px'});
});

$('input').blur(function() {
         $(this).css({'width': '100px'});
 });

Similarly you could use background-color property to toggle between color

----- Edit by OP ---

I marked this as answer, however I did modify it to be a lot more like the Apple website.

$('input').focus(function() {
         $(this).animate({width: 150}, 'slow');
});

$('input').blur(function() {
         $(this).animate({width: 100}, 'slow');
 });

Look at this article I think it can help you to certain extent.....the search box doesn't get focus when clicked but it's size is increased......http://www.bloggermint.com/2011/06/css3-search-box-inspired-by-apple-com/