1

Apple の navbar スタイル、特に CSS3 拡張検索フィールドを模倣しようとしています。

これは、display:table で UL を使用し、display:table-cell および width:100% で LI を使用します。フォーカスされると、検索 LI が拡張され、他の LI のコントラクトが適合します。

今、私のliのサイズは変更されません。

誰かが私がそこに欠けているものについて手がかりを得ましたか?

また、IEは何も表示していません。

4

2 に答える 2

3

ねえ、これを使うことができます

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/

于 2012-07-03T07:37:06.097 に答える
1

アップルページでは、入力がフォーカスされると、.要素を含む-要素の幅を処理するクラスを-要素()に追加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-transitionsFXに使用しています:)

于 2012-07-03T09:40:41.837 に答える