2021.07.06

シンプルなデザインの検索ボックスのCSSスタイリング【フォーム】

下記のようなシンプルな検索ボックスのCSSでのスタイリングの方法です。

完成版を確認（このような検索ボックスを作ります）

まずは完成版のデモです。

See the Pen
by mskyw (@kyswm)
on CodePen.

右の虫眼鏡マークはクリックできる仕様です。

レスポンシブですが、PC版とスマホ版でデザインを変えてみました。(CodePenの「×0.5」のボタンを押すと小さくなってはしまいますが、PC版の表示が確認できます。)
どちらかのデザインで統一する際は、borderのあたりを調整してください。

検索ボックスの各部分について解説

それでは、直接フォームのデザインに関わる部分だけをピックアップしていきます。

HTMLの記述（フォーム要素を記述）

<form class="searchForm">
  <input type="search" class="text" placeholder="キーワードで探す">
  <button type="submit" value="検索"><img src="https://drive.google.com/uc?export=view&id=14qL6YD2g-JNNp6ClYdNpiVjZDAGp3eaL" alt=""></button>
</form>

まずはHTMLです。
formタグの中に、検索テキストを入力するパーツと検索ボタンのパーツを設置しています。
imgタグの部分は、自分で画像を読み込んだり、FontAwesomeのタグを設置するなどしてください。

スタイルの記述（検索テキスト入力部分）

/* 検索ボックスのスタイル */
.searchForm {
  margin: auto;
  height: 50px;
  width: 80%;
  max-width: 1000px;
  position: relative;
  display: flex;
  justify-content: center;
  
  @include mq(md){
    height: 40px;
  }
}

SCSSファイルですが、メディアクエリをSCSSで書いているだけなのでほぼCSSです。
formタグの中のパーツの並べ方について、positionを使用している記事を多く見かけましたが、ここではflexboxで指定しています。
その他は幅や位置の指定なので、適宜調節してください。

スタイルの記述（検索テキスト入力部分）

/* 検索ボックスのスタイル */
.searchForm {
～省略～

  & input[type="search"] {
    height: 50px;
    width: 95%;
    padding: 0 10px;
    border: 2px solid #000;
    border-right: none;
    font-size: 2rem;
    
    @include mq(md){
      height: 40px;
      border-right: 2px solid #000;
      font-size: 1.8rem;
    }
  }
}

次は、formタグの中の検索テキストの入力エリアです。
シンプルに黒のボーダーにしています。
PC版の様に、入力エリアと検索ボタンを一体のデザインにするなら、border-rightは不要ですのでnoneにしています。

スタイルの記述（虫眼鏡マークの検索ボタン部分）

/* 検索ボックスのスタイル */
.searchForm {
～省略～

  & button[type="submit"] {
    border: 2px solid #000;
    border-left: none;
    padding: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    
    @include mq(md){
      height: 40px;
    }

    & img{
      width: 33px;
      
      @include mq(md){
        width: 20px;
      }
    }
  }
}

最後に、検索ボタン（虫眼鏡マーク）の部分です。
こちらもPC版の様に、入力エリアと検索ボタンを一体のデザインにするなら、border-leftは不要ですのでnoneにしています。