苹果样式扩大搜索 [英] apple style expanding searchfield

问题描述

我试图模仿苹果的navbar风格，特别是CSS3扩展搜索栏。

它使用UL with display：table，它的LI与display：table-cell和width：100％。当聚焦时，搜索LI展开，另一个LI的合同合适。

现在我的li不会调整大小。

此外，IE甚至不显示任何内容。

解决方案

现在你可以使用这个

HTML b

 < input type =textplaceholder =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; 
} 
  

现场演示 http://jsfiddle.net/vzLFS/3/

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.

解决方案

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/

这篇关于苹果样式扩大搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！