Question

我正试图模仿苹果的导航栏式，特别是CSS3扩展搜索域。

它使用带有display：table的UL和带有显示的LI：table-cell和width：100％。聚焦时，搜索LI扩展，另一个LI的合同适合。

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

有人知道我在那里失踪了吗？

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

Answer 1

嘿，现在你可以使用这个

<强> 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;
}

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

Answer 2

在苹果页面上，当输入聚焦时，它们似乎在nav - 元素（.searchmode）中添加了一个类，它处理<li> - 包含的元素的宽度。 <input>。

虽然不确定是否有针对css的解决方案，但您可以像jQuery那样做这样的事情：

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

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

...仍然使用css-transitions作为FX：）

苹果风格扩大搜索域

2 个答案: