CSS

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

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

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

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アイコンフォント
「フォント」というと文字の種類を指すものというイメージがありますが文字だけでなくアイコンの形をしたフォントというのがあるのをご存知ですか？実は、みなさんも何気なく目にしているものだったりします。例えば、こういうものです。 これ全部、フォン...

コンテンツ [hide]

デザインサンプル１

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;
}

デザインサンプル２

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;
}

デザインサンプル３

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;
}

デザインサンプル４

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;
}

デザインサンプル５

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;
}

デザインサンプル６

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;
}

デザインサンプル７

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;
}

デザインサンプル８

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;
}

デザインサンプル９

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

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

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

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

  2. CSS

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

  3. CSS

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

  4. CSS

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

  5. WordPress

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