[CSS]formの検索窓デザインについて

名称未設定 1
↑こういうのについてのメモ。

アイコンが検索窓の中に入ってるのがしばらく前からのトレンド。

HTML

難しいことはなく、親(例ではform)の中にinput各種を突っ込む。
何のstyleもあててなければ横並びで表示される。

親の方でどうにかする

input[type=”search”]のpaddingが地味に重要で、これをやらんと文字とアイコンがかぶってしまう。
box-sizing:border-box;を使うとborderとかpaddingとかwidthとぶつかって調整必要だ―って手間がかなり軽減されるのでオススメ。

inputをちゃんと活用する

display:none;を使いたくない、input同士をかぶせたくない場合。
元々テキスト入れた後にEnter押せば動くけど、
submitが生きてればアイコンがクリックして検索動作させることができるので安心。

inputをちゃんと活用する2

positionでもってsubmitをsearchにかぶせる形で配置。
ここでも文字とアイコンがかぶるのを回避するために、
searchにpaddingでアイコンのスペースを確保する必要がある。

まとめ

とりあえず数値はざっくりだから実際使うときは余白調整した方がいい。
変にこだわらなければ多分この3種類のどれかになると思う。
こういうデザインにする必要性は殆ど無いんだけど、
要素を1つにまとめられる利点を活用するとしたらスマホ用のサイトになるのかな。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする