スイッチ式検索フォームをCSSで作る！Javascriptを使わないデザイン方法

By

公開日: 更新日:

スイッチ式検索フォームをCSSで作る！Javascriptを使わないデザイン方法

虫眼鏡のアイコンをクリックすると検索フォームが現れるサイトをよく見かけます。モバイルファーストでサイトが作られるようになっているからでしょうか。余分なスペースを使わずに済むのでサイトがスッキリしみえますね。

そのスイッチ式の検索フォームをjavascriptを使わず、CSSで作ってみたので紹介します。

検索フォームに搭載する機能

検索フォームには以下、8つの機能を満たすものを考えました。

  1. 虫眼鏡アイコンをクリックすると検索フォームが現れる
  2. アイコンは、クリックできることが分かるようにhoverするとカーソルがポインタになる
  3. クリックしたら、検索フォームにフォーカスされてすぐ文字が入力できる
  4. Enterで検索できるように促す
  5. なるべく余分なスペースをとらないようにする
  6. 検索フォーム以外をクリックすると非表示になりフォーカスを外す
  7. モバイル端末でも入力しやすいようにする
  8. 表示、非表示にアニメーションをつける

検索フォームを作る

最終的に形にした検索フォームは、ナビゲーションの右側にアイコンを配置したものにしました。

HTML

HTMLは以下のようになっています。

<div class="menu-wrap">
    <ul class="menu">
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
    </ul>
    <form method="get" class="fa fa-search search-form" action="https://millkeyweb.com/">
        <input type="search" placeholder="Type here and hit enter..." value="" name="s" class="search-field" />
        <input type="submit" value="Search" />
    </form>
</div>

CSS

CSS以下のようになっています。36行目まではナビゲーションの実装部分で、36行目から下は検索フォームの実装部分です。

* {
    box-sizing: border-box;
}
.menu-wrap {
    overflow: hidden;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
    background: #333;
}
.menu {
    list-style: none;
    overflow: hidden;
    float: left;
    margin: 0 auto;
    padding: 0;
}
.menu li {
    float: left;
    margin: 0;
    padding: 0;
}
.menu li a {
    display: block;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    color: #fff;
    text-decoration: none;
    text-align: center;
}
.menu li a:hover {
    background: #444;
}
.search-form {
    display: block;
    position: relative;
}
.search-form:before, .search-field {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    margin: 0;
}
.search-form:before {
    z-index: 100;
    line-height: 50px;
    background: #65b1e4;
    color: #FFF;
    text-align: center;
}
.search-field {
    -webkit-appearance: none;
    border-radius: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    z-index: 200;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.search-field:focus {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    width: 100%;
    cursor: text;
}
.search-form input[type="submit"] {
    display: none;
}

検索フォームの部分ごとの解説

スイッチ風に見せるには、透過した検索フォームの下にアイコンを表示させて、アイコンをクリックしたように見せて実は検索フォームにフォーカスする仕組みです。フォーカスすると透過した要素が表示されるように見せることで、表示と非表示が実現されます。

それでは検索フォームの部分ごとの解説をします。

ポジションを使って右に寄せる

ナビ部分にfloat: left;を指定して、検索フォーム部分はposition: relative;をあてて基準のポジションにしておきます。

アイコン部分とテキスト入力エリアをposition: absolute;、top: 0;、right: 0;で右に寄せています。

.search-form {
    display: block;
    position: relative;
}
.search-form:before, .search-field {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    margin: 0;
}

display: block;は、「Font Awesome」を使う時にdisplay: inline-block;になるのでdisplay: block;を指定しています。

サブミットボタンは非表示に

サブミットボタンはdisplay: none;で非表示にし、検索する時はEnterで行うように促します。Enterで検索できると分かるように、初期表示する内容（プレースホルダー）を指定するplaceholder属性を使いました。「Type here and hit enter…」という文字列を入れています。

.search-form input[type="submit"] {
    display: none;
}
<input type="search" placeholder="Type here and hit enter..." value="" name="s" class="search-field" />

検索フォームとアイコンの幅と高さを合わせ重ねる

アイコンはformタグに擬似要素の:beforeを指定して、今回はアイコン型Webフォントの「Font Awesome」を使って表示しています。幅と高さは50×50に合わせ、position: absolute;を使って検索フォームとアイコンを重ねあわせているので、このとき検索フォームが上になるように、z-indexを使っています。

.search-form:before, .search-field {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    margin: 0;
}
.search-form:before {
    z-index: 100;
    line-height: 50px;
    background: #65b1e4;
    color: #FFF;
    text-align: center;
}
.search-field {
    z-index: 200;
}

アイコンがわかりやすいようにbackground: #65b1e4;とcolor: #FFF;を指定しています。アイコンをセンターに表示するためline-heightも50pxに合わせてtext-align: center;を指定しています。

検索フォームを透明にする

アイコンの上に検索フォームが重なった状態で、opacity: 0;にし、透明にします。これで検索フォームは透明なのでアイコンが表示される状態になります。opacityがIE8ではきかないのでfilterプロパティを使っています。

.search-field {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
}

ホバー時にポインタを表示する

検索フォームが透明になっているだけなので、アイコンにホバーするとカーソルの表示がcursor: text;になります。これは不自然なので、デフォルトではカーソルをcursor: pointer;にします。

.search-field {
    cursor: pointer;
}

フォーカス時に表示する

あとはクリックしてフォーカスしたときに表示すればスイッチ式の検索フォームが実現できます。フォーカスされたらopacity: 1;にしましょう。これで検索フォームが表示されアイコンが隠れます。

表示されてもまだ入力欄が狭いので、フォーカス時に幅も大きくします。今回はwidth: 100%;にしてナビ部分全体が検索フォームになるようにしました。

これでモバイル端末でも広く表示されるので入力し易くなると思います。これで検索フォームにフォーカスした時はフォームが現れ、フォーカスが外れると隠れるようになりました。あとはカーソルの表示をcursor: text;に戻してあげれば自然です。

.search-field:focus {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    width: 100%;
    cursor: text;
}

スマホのスタイルをリセット

スイッチ式検索フォームが実装できますがiPhoneでみると入力フォーム部分が角丸になっています。表示が綺麗じゃないので、それをリセットするCSSの指定が以下の部分です。

.search-field {
    -webkit-appearance: none;
    border-radius: 0;
}

アニメーションをつける

ちょっとした動きを出すために、検索フォームに、transitionプロパティを指定していします。これで表示、非表示にちょっとしたアニメーションがつくようなりました。今回は以下のようにしましたが、お好みで表示速度や動きを変えてみてください。

アニメーションはIE8以下は対応していません。

.search-field {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

あとがき

Javascriptを使わず、CSSで作ることによってWebサイトの表示速度の高速化に繋がるかもしれません。JQueryなどで表示切り替えしていたら試してみるといいかも。

関連記事