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というアイコンフォントも使っています。

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

デザインサンプル1

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

デザインサンプル2

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

デザインサンプル3

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

デザインサンプル4

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

デザインサンプル5

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

デザインサンプル6

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

デザインサンプル7

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

デザインサンプル8

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

デザインサンプル9

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. CSS

    CSS|中央寄せが効かないときは・・・
  2. CSS

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

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

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

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