基本的に、そのようなものが欲しい
TEXT_____________________[img]
'TEXT' is actual label for example `<div>LABEL</div>`
'_____________' is a `hr` element
'[img]' is a small image, for example a magnifying glass
望ましいアニメーションは、ユーザーが [img] をクリックすると、検索入力ボックスが遅くなり、画像の左側に表示されることです。たとえば、クリックした後です。
TEXT________ [search-box] [img]
[img] は右に浮いた同じ場所にある必要があります。唯一の変更点は、hr
要素全体が同じ幅である必要がありますが、縮小されることです。
私はいくつかのプロトタイプを持っていますが、それは少しハッキーで醜いです。誰かが良い解決策を提案できますか?
編集: http://jsfiddle.net/BTFEd/2/
ええ、そのフィドルのようなものですが、画像アイコンは右端にとどまり、検索ボックスの可視性に応じて hr が縮小または拡大します。