Home/ Questions/Q 8179957
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T00:06:47+00:00

I’m trying to mimic apple’s navbar style, specially the CSS3 expanding searchfield. It uses

  • 0

I’m trying to mimic apple’s navbar style, specially the CSS3 expanding searchfield.

It uses an UL with display:table and it’s LI’s with display:table-cell and width:100%. When focused the search LI expands and the other LI’s contract to fit.

Now my li’s won’t resize.

Anybody got a clue on what I’m missing there?

Also, IE is not even displaying anything.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Hey now you can used this one

    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/

    • 0