CSS

CSS｜検索ボックスのデザインサンプル11点

検索ボックスのデザインってシンプルに見えて意外とバリエーションがあるものです。ここでは検索ボックスのデザインサンプルをいくつかご紹介していきます。まずは、何もデザインをしていないものがこちらです。

ボタンで表示を切り替えてご覧ください。

See the Pen search-box01 by kenichi (@ken81) on CodePen.

HTML

<form method="get" action="#" class="search_container">
  <input type="text" size="25" placeholder="　キーワード検索">
  <input type="submit" value="検索">
</form>

最低限必要なタグのみを使いました。class="search_container"はこれからスタイルシートを入れていくのに必要なので入れてあります。このコードにスタイルシートのみを追加していろんなデザインを展開していきます。それから、虫眼鏡のアイコンとしてFont Awesomeというアイコンフォントも使っています。

アイコンフォントについて知りたい方はこちらもご参照ください。

Font Awesome 5｜いろんなアイコンが使えるWEBアイコンフォント
2017.09.03
Font Awesome 5｜いろんなアイコンが使えるWEBアイコンフォント
「フォント」というと文字の種類を指すものというイメージがありますが文字だけでなくアイコンの形をしたフォントというのがあるのをご存知ですか？実は、みなさんも何気なく目にしているものだったりします。例えば、こういうものです。 これ全部、フォン...

コンテンツ

デザインサンプル１

See the Pen search-box02 by kenichi (@ken81) on CodePen.

CSS

.search_container{
  box-sizing: border-box;
  position: relative;
  border: 1px solid #999;
  display: block;
  padding: 3px 10px;
  border-radius: 20px;
  height: 2.3em;
  width: 260px;
}
.search_container input[type="text"]{
  border: none;
  position: relative;
  height: 2.0em;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  border: none;
  border-radius: 20%;
  background: #3879D9;
  color: #fff;
  outline : none;
  width: 2.0em;
  height: 2.0em;
}

デザインサンプル２

See the Pen search-box03 by kenichi (@ken81) on CodePen.

CSS

.search_container{
  box-sizing: border-box;
  position: relative;
  border: 1px solid #999;
  display: block;
  padding: 3px 10px;
  border-radius: 20px;
  height: 2.3em;
  width: 265px;
  overflow: hidden;
}
.search_container input[type="text"]{
  border: none;
  height: 2.0em;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  border: none;
  background: #3879D9;
  color: #fff;
  position: absolute;
  width: 3.5em;
  height: 3.0em;
  right:0px;
  top: -3px;
  outline : none;
}

デザインサンプル３

See the Pen search-box04 by kenichi (@ken81) on CodePen.

CSS

.search_container{
  box-sizing: border-box;
  position: relative;
  border: 1px solid #999;
  display: block;
  padding: 3px 10px;
  border-radius: 20px;
  height: 2.3em;
  width: 260px;
  overflow: hidden;
}
.search_container input[type="text"]{
  border: none;
  height: 2.0em;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  font-size: 1.3em;
  border: none;
  background: none;
  color: #3879D9;
  position: absolute;
  width: 2.5em;
  height: 2.5em;
  right: 0;
  top: -10px;
  outline : none;
}

デザインサンプル４

See the Pen search-box05 by kenichi (@ken81) on CodePen.

CSS

.search_container{
  box-sizing: border-box;
}
.search_container input[type="text"]{
  background: #ccddf5;
  border: none;
  height: 35px;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  border: none;
  background: #3879D9;
  color: #fff;
  outline : none;
  width: 3.0em;
  height: 37px;
}

デザインサンプル５

See the Pen search-box06 by kenichi (@ken81) on CodePen.

CSS

.search_container{
  box-sizing: border-box;
}
.search_container input[type="text"]{
  background: #ccddf5;
  border: none;
  height: 2.0em;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  border: none;
  background: #3879D9;
  color: #fff;
  outline : none;
  height: 2.2em;
}
.search_container ::-webkit-input-placeholder {
  color: #3879D9;
}

デザインサンプル６

See the Pen search-box07 by kenichi (@ken81) on CodePen.

CSS

.search_container{
  box-sizing: border-box;
}
.search_container input[type="text"]{
  border: 1px solid #999;
  padding: 3px 5px;
  border-radius: 20px;
  height: 2.0em;
  width: 245px;
  overflow: hidden;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  font-size: 1.3em;
  border: none;
  background: none;
  color: #3879D9;
  outline : none;
  display: inline-block;
  vertical-align: middle;
}

デザインサンプル７

See the Pen search-box08 by kenichi (@ken81) on CodePen.

CSS

.search_container{
  position: relative;
  box-sizing: border-box;
  border: 2px solid #3879D9;
  display: block;
  padding: 3px 10px;
  border-radius: 3px;
  height: 2.3em;
  width: 265px;
  overflow: hidden;
}
.search_container input[type="text"]{
  border: none;
  height: 2.0em;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  border: none;
  background: #3879D9;
  color: #fff;
  position: absolute;
  width: 3.5em;
  height: 3.0em;
  right:0px;
  top: -5px;
  outline : none;
}

デザインサンプル８

See the Pen search-box09 by kenichi (@ken81) on CodePen.

CSS

.search_container{
  position: relative;
  box-sizing: border-box;
}
.search_container input[type="text"]{
  border: none;
  height: 1.8em;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container{
  border: 2px solid #3879D9;
  padding: 3px 5px;
  border-radius: 20px;
  height: 2.2em;
  width: 265px;
  overflow: hidden;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  border: none;
  background: #3879D9;
  color: #fff;
  position: absolute;
  width: 3.5em;
  height: 3.0em;
  right:0px;
  top: -5px;
  outline : none;
}
.search_container ::-webkit-input-placeholder {
  color: #3879D9;
}

デザインサンプル９

See the Pen search-box10 by kenichi (@ken81) on CodePen.

CSS

.search_container{
  position: relative;
  width:245px;
  box-sizing: border-box;
  margin-top: 15px;
}
.search_container input[type="text"]{
  border: 1px solid #999;
  padding: 3px 5px;
  border-radius: 5px 0 0 5px;
  height: 2.2em;
  overflow: hidden;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  font-size: 1.3em;
  border: none;
  background: #3879D9;
  color: #fff;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  outline : none;
  position: absolute;
  top: -8px;
  right: -15px;
}

デザインサンプル10

See the Pen search-box11 by kenichi (@ken81) on CodePen.

CSS

.search_container input[type="text"]{
  border: 1px solid #999;
  padding: 3px 10px;
  border-radius: 3px;
  height: 2.2em;
  overflow: hidden;
}
.search_container input[type="text"]:focus {
  outline: 0;
  height: 2.0em;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  font-size: 1.2em;
  border: none;
  background: #3879D9;
  border: 1px solid #3879D9;
  border-radius: 3px;
  color: #fff;
  outline : none;
  width: 3.5em;
  height: 1.9em;
  display: inline-block;
  vertical-align: middle;
}

デザインサンプル11

See the Pen search-box12 by kenichi (@ken81) on CodePen.

CSS

.search_container{
  position: relative;
  box-sizing: border-box;
  display: block;
  padding: 3px 10px;
  border-radius: 20px;
  height: 2.2em;
  width: 250px;
  overflow: hidden;
  background: #3879D9;
}
.search_container input[type="text"]{
  border: none;
  height: 2.0em;
  background: #3879D9;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  font-size: 1.3em;
  border: none;
  background: none;
  color: #fff;
  position: absolute;
  height: 2.5em;
  right: 8px;
  top: -10px;
  outline : none;
}
.search_container ::-webkit-input-placeholder {
  color: #fff;
}

いかがだったでしょうか？
実際に埋め込む際は、調整が必要になると思いますが、良かったら参考にしてみてくださいね。

最近の記事

  1. 2023.03.8

    クリックでYouTube動画をポップアップ再生させ…

    WordPress内でリンクをクリックしたらYouTube動画がポップアップさ…

  2. 2020.11.22

    Photoshop｜写真の境界線をボカす方法

    Photoshop｜写真の境界線をボカす方法以前、こちらの記事…

  3. 2020.11.22

    Illustrator｜筆で描いた文字をパスに変え…

    Illustrator｜筆で描いた文字をパスに変える方法ここでは筆で書…

  4. 2020.11.8

    Illustrator｜ポカポカ温かい文字の作り方…

    ここでは、Illustratorを使ってこんな感じの温かい文字を作る方…

  5. 2020.09.14

    Illustrator｜同じ色を一括で変換したい

    Illustratorで同じ色をいろんなオブジェクトで使用している場合、色の変更…

  1. CSS

    レスポンシブウェブデザインの基本｜メディアクリエリの設定

  2. WordPress

    WordPressの立ち上げからサイト構築までの初期手順

  3. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…

  4. CSS

    要素の配置が簡単に決まるFlexboxの使い方

  5. CSS

    CSS｜中央寄せが効かないときは・・・
PAGE TOP