Apple style search field extension

Question

I am trying to imitate the style of Apple navbar, especially expanding the CSS3 search field.

It uses UL with display: table and LI with display: table-cell and width: 100%. With focus, the LI search expands, and another LI contract fits.

Now my li will not resize.

Has anyone realized what I am missing there?

In addition, IE does not even display anything.

Answer 1

Now you can use this

HTML

<input type="text" placeholder="search bar"> 

CSS

 input[type="text"] { background: #444; border: 0 none; font: bold 12px Arial,Helvetica,Sans-serif; color: #d7d7d7; width:50px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; margin:3px 12px; } input[type="text"]:focus { background:#fcfcfc; color: #6a6f75; width: 120px; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); margin:3px 12px; outline: none; } input[type="text"] { -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } 

live demo http://jsfiddle.net/vzLFS/3/

Answer 2

On the apple page, they add a class to the nav -element ( .searchmode ) element when the input is focused, which handles the width of the <li> element containing the <input> .

Not sure if there is a CSS solution for which you can do something like jQuery like this:

 $('#searchform input').on('focus', function(){ $(this).closest('li').css('width', '180px'); }); $('#searchform input').on('blur', function(){ $(this).closest('li').css('width', '50px'); }); 

... and still use css-transitions for FX :)