0

Apple.com の伸縮性のある検索ボックスをフォーカスして再作成しようとしています。私はそれを機能させましたが、私のものは背景画像を伸ばし、虫眼鏡が伸びずに縫い目が優雅に追加されるようにします。また、ある背景を別の背景にフェードさせることもできました。

ここに私のCSSがあります

#header input {
    background:url(http://www.golfbrowser.com/images/icons/search.png) no-repeat top right;
    padding:2px;
    margin-top:8px;
    margin-right:10px;
    padding-left:18px;
    font-family:"Lucida Grande", Arial, sans-serif;
    font-size:12px;
    color:#222;
    border:0px;
    background-color:none;
    float:right;
    width:140px;
    background-size:160px 20px;
}
#header input:focus {
    background:url(http://www.golfbrowser.com/images/icons/search-z.png) no-repeat top right;
    transition: width 0.5s, background-size 0.5s, background 0.5s;
    -moz-transition: width 0.5s, background-size 0.5s, background 0.5s;
    -webkit-transition: width 0.5s, background-size 0.5s, background 0.5s;
    -o-transition: width 0.5s, background-size 0.5s, background 0.5s;
    width:180px;
    background-size:200px 20px;
}
#header input:blur {
    transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s;
    width:140px;
    background-size:160px 20px;
}

実装については、http://www.golfbrowser.com/を参照してください。

4

2 に答える 2

0

虫眼鏡がまったく伸びていないようです。Chromeでは問題ないようです。このCSSを希望の場所に配置しましたか？

Appleのコードアプローチはあなたのものとは少し異なります。彼らは、検索ボックスがフォーカスされているときに、JavaScriptを使用してクラス「searchmode」をnav要素に追加しています。これにより、すべてのサイズを変更/移行できます。すべてのCSSアプローチは、疑似クラス（実際にはCSSセレクターがない）が、DOMで選択された要素の前にある親要素や兄弟にさえ影響を与えないという事実によって制限されます。私が見た動作の違いの1つは、ホバーするとボックスが白くなり、選択されるまでアップルのボックスは白のままになることです。私はあなたがそれをそのように望んでいたとかなり確信しています。

ところで、あなたは背景画像、期間を移行することはできません。これには背景のグラデーションが含まれます。これは既知の問題ではなく、仕様の事実にすぎません。

于 2012-05-31T03:17:04.723 に答える
0

リストに追加すると、背景色も遷移できます。背景画像に関しては、gecko2.0 ベースには既知の問題があり、グラデーション画像のみを移行できます。

これが役立つことを願っています:)

于 2011-05-14T20:37:42.900 に答える