↑こういうのについてのメモ。
アイコンが検索窓の中に入ってるのがしばらく前からのトレンド。
HTML
1 2 3 4 | <form> <input type="search"> <input type="submit"> </form> |
難しいことはなく、親（例ではform）の中にinput各種を突っ込む。
何のstyleもあててなければ横並びで表示される。
親の方でどうにかする
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | form{/* ビジュアル全部処理する */ width:200px; height:20px; border:1px solid #333; background-image:/* 検索アイコン */; background-position:right center; } input[type="search"]{/* formいっぱいにする */ width:100%; height:100%; padding-right:/* アイコン分の余白 */; border:none; box-sizing:border-box; } input[type="submit"]{/* 消しちゃう */ display:none; } |
input[type=”search”]のpaddingが地味に重要で、これをやらんと文字とアイコンがかぶってしまう。
box-sizing:border-box;を使うとborderとかpaddingとかwidthとぶつかって調整必要だ―って手間がかなり軽減されるのでオススメ。
inputをちゃんと活用する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | form{/* 全体のサイズ+枠線 */ width:200px; height:20px; display:table; border:1px solid #333; } input[type="search"]{ width:/* form幅-アイコン幅 */; height:20px; display:table-cell; vertical-align:middle; border:none; } input[type="submit"]{ width:/* アイコン幅 */; height:20px; display:table-cell; vertical-align:middle; border:none; background:none; background-image:/* アイコン画像 */; text-indent:-999px; } |
display:none;を使いたくない、input同士をかぶせたくない場合。
元々テキスト入れた後にEnter押せば動くけど、
submitが生きてればアイコンがクリックして検索動作させることができるので安心。
inputをちゃんと活用する2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | form{/* 全体のサイズを決める */ width:200px; height:20px; position:relative; } input[type="search"]{/* 親いっぱいに表示 */ width:100%; height:100%; padding-right:/* アイコン分 */; box-sizing:border-box; } input[type="submit"]{ border:none; background:none; background-image:/* アイコン画像 */; text-indent:-999px; position:absolute; right:/* 0もしくは余白 */; top:/* 0もしくは余白 */; } |
positionでもってsubmitをsearchにかぶせる形で配置。
ここでも文字とアイコンがかぶるのを回避するために、
searchにpaddingでアイコンのスペースを確保する必要がある。
まとめ
とりあえず数値はざっくりだから実際使うときは余白調整した方がいい。
変にこだわらなければ多分この3種類のどれかになると思う。
こういうデザインにする必要性は殆ど無いんだけど、
要素を１つにまとめられる利点を活用するとしたらスマホ用のサイトになるのかな。
コメント