ミギムキ

[CSS] ボタン押下で入力欄を表示する検索フォーム

入力欄を動的に表示切り替えする検索フォーム

動作イメージ

サンプルコード

html

<div class="searchform"> <label for="searchform_flag" class="searchform_button"><span class="magnifying_glass"></span></label> <input type="checkbox" id="searchform_flag" class="searchform_check"> <div class="searchform_popup"> <form method="get" action=""> <input type="text" value="" name="s"> <input type="submit" value="検索"> </form> </div> </div>
スポンサー広告

html(WordPress環境)

<div class="searchform"> <label for="searchform_flag" class="searchform_button"><span class="magnifying_glass"></span></label> <input type="checkbox" id="searchform_flag" class="searchform_check"> <div class="searchform_popup"> <form method="get" action="<?php echo esc_url(home_url('/')); ?>"> <input type="text" value="<?php echo get_search_query(); ?>" name="s"> <input type="submit" value="検索"> </form> </div> </div>
  • WordPressで作ったサイトの場合は、提供されている関数を利用してaction属性や入力欄の初期値が簡単に設定できます

CSS

.searchform { display: table; position: relative; } .searchform_button:hover { cursor: pointer; } .searchform_check { display: none; } .searchform_popup { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); width: 20em; opacity: 0; visibility: hidden; pointer-events: none; transition: bottom 0.5s, opacity 0.5s; } .searchform_check:checked + .searchform_popup { bottom: -100%; opacity: 1; visibility: visible; pointer-events: auto; } .searchform_popup form { display: flex; justify-content: space-between; width: 100%; } .searchform_popup input { box-sizing: border-box; } .searchform_popup input[type="text"] { padding: 0.5em 1em; width: 80%; } .searchform_popup input[type="submit"] { padding: 0.5em; width: calc(20% - 10px); }

サンプルコードの解説

入力欄表示用のボタン

<label for="searchform_flag" class="searchform_button"><span class="magnifying_glass"></span></label>
  • 入力欄の表示を切り替えるボタン部分のコードです
  • ボタンには画像やフォントアイコンなどを適宜使用してください
  • 上記サンプルでは、こちらで紹介したCSSでアイコンを描いています

チェックボックスを使った表示切り替え

<input type="checkbox" id="searchform_flag" class="searchform_check"> <div class="searchform_popup"> 〜 </div>
スポンサー広告
  • チェックボックス「searchform_check」の直後に入力欄を置く「searchform_popup」を配置しています
  • チェックボックス自体はCSSで非表示にしていますが、紐付けられたlabel要素「searchform_button」がクリックされる度にチェック状態が切り替わり「:checked」セレクタが有効/無効になります
.searchform_check:checked + .searchform_popup { bottom: -100%; opacity: 1; visibility: visible; pointer-events: auto; }
  • 「:checked」セレクタと「+」を組み合わせて指定することで、「searchform_popup」のスタイルを切り替えることができます

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。

スポンサー広告