オーバーレイで検索フォーム

オーバーレイで検索フォーム

2018年10月15日 [検索]

フォームのHTML部分

ソースを表示
印刷SyntaxHighlighterについて
<div class="ol-searchform">
  <input id="ol-search" type="checkbox">
  <label for="ol-search" class="search-icon"></label>
  <div class="ol-search-wrap">
    <label for="ol-search" class="overlay"></label>
    <form role="search" method="get" class="searchform" action="http://happychance.net/wp/">
      <input type="search" class="search-field" name="s" placeholder="KEYWORD">
      <button type="submit" class="search-submit">
        <span class="fa fa-search fa-fw"></span>
      </button>
    </form>
  </div>
</div>

フォームのCSS部分

ソースを表示
印刷SyntaxHighlighterについて
/* オーバーレイ検索フォーム */
#ol-search{
  display:none;
}
.search-icon{
  cursor:pointer;
}
.search-icon::before{
  font-family:FontAwesome;
  content:'\f002';
}
.overlay,
.ol-search-wrap{
  display:none;
  opacity:0;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  animation:fade_overlay .3s;
}
.ol-search-wrap{
  z-index:9990;
}
.overlay{
  z-index:9991;
  background:rgba(0,0,0,.4);
}
#ol-search:checked ~ .ol-search-wrap,
#ol-search:checked ~ .ol-search-wrap .overlay{
  display:block;
  opacity:1;
}
.ol-searchform .searchform{
  position:fixed;
  top:50%;
  left:50%;
  z-index:9999;
  width:60%;
  max-width:520px;
  border:solid 2px #fff;
  border-radius:4px;
  transform:translate(-50%,-50%);
  display:flex;
}
.ol-searchform .search-field, .ol-searchform .search-submit{
  height:48px;
  padding:4px 12px;
  border:none;
  background:rgba(0,0,0,.3);
  font-size:18px;
  color:#fff;
  transition:.3s;
  outline:none;
}
.ol-searchform .search-field{
  flex:1;
  border-radius:4px 0 0 4px;
}
.ol-searchform .search-submit{
  cursor:pointer;
  border-radius:0 4px 4px 0;
}
.ol-searchform .search-field:focus,
.ol-searchform .search-field:focus + .search-submit{
  background:rgba(0,0,0,1);
}
/* オーバーレイ検索フォーム */

参考サイト
https://www.webnoiroha.net/webdesign/css/overlay-searchform/

関連記事はこちら！

スポンサーリンク

ポチッ☆とクリックお願いします！
↓　↓　↓

  • にほんブログ村 ＩＴ技術ブログ ホームページ・サイト制作支援へ

タグ：,

コメントは受け付けていません。

サブコンテンツ

Copyright (C) 2025 HIROCREATE All Rights Reserved.

TOP