検索窓をデザインする

検索窓は検索用のテキスト入力とボタンが1対で出来ているため、テキストとボタンを繋げたり、テキスト内にボタンを配置するなど色々なデザインが利用されています。

当ページは、テキストとボタンを一体化したデザインを作成することが出来ます。また、サンプルも掲載していますので、ぜひご活用ください。

色々試してみて、生成されたCSSをコピーしてご利用ください。

検索

<div class="searchArea" id="makeImg">
  <input type="text" id="inText" class="searchText">
  <div class="searchButton">
    <span>検索</span>
  </div>
</div>

虫眼鏡などの検索アイコンは以下よりダウンロードできます。
【フリーアイコン】検索

<style type="text/css">
 /* --- 検索全体のBOX (サンプル用)--- */
.searchArea{
  width          : 290px;              /* BOXの幅               */
  height         : 24px;               /* BOXの高さ             */
  margin         : auto;               /* サンプルを中心に寄せ  */
  letter-spacing : 0.1em;              /* 文字間隔              */
  font-weight    : bold;               /* 太字                  */
  line-height    : 0;                  /* 標準の行高さ          */
}
 
 /* --- テキスト入力欄のSTYLE設定 --- */
.searchArea .searchText {
  display        : block;              /* ブロック化            */
  float          : left;               /* 横並び                */
  box-sizing     : border-box;         /* 枠線,余白を含んだ長さ */
  height         : 24px;               /* 入力の高さ            */
  width          : 170px;              /* 入力の幅              */
  margin         : 0;                  /* 外余白                */
  padding        : 0 12px;             /* 内余白                */
  border         : 2px solid #007fff;  /* 枠線　幅,実践,色      */
  border-radius  : 12px 0 0 12px;      /* 左上下の角丸          */
  color          : #333;               /* 文字色                */
  outline        : 0;                  /* 入力の薄い枠を非表示  */
  font-size      : 12px;               /* フォントサイズ        */
}
 
 /* --- 検索ボタン欄のSTYLE設定 --- */
.searchArea .searchButton {
  float          : left;               /* 横並び                */
  box-sizing     : border-box;         /* 枠線,余白を含んだ長さ */
  height         : 24px;               /* 入力の高さ            */
  margin         : 0;                  /* 外余白                */
  padding        : 6px 10px;           /* 内余白                */
  border         : none;               /* 枠線　幅,実践,色      */
  border-radius  : 0 12px 12px 0;      /* 右上下の角丸          */
  background     : #007fff;            /* ボタンの色            */
  color          : #fff;               /* 文字色                */
  cursor         : pointer;            /* カーソル設定          */
  line-height    : 12px;               /* 1行の高さ             */
  font-size      : 12px;               /* フォントサイズ        */
}
 
 /* --- 検索ボタン欄にフォーカスか来たとき --- */
.searchArea .searchText:focus {
  background     : #cfe7ff;            /* フォーカス時の背景色  */
}
 
 /* --- IEの入力エリア右側×消し -------------------------*/
.searchArea .searchText::-ms-clear {
  display        : none;               /* ×を消す              */
}</style>

デザインで使用している画像は、直接リンクで使用しないでください。
虫眼鏡などの検索アイコンは以下よりダウンロードできます。
【フリーアイコン】検索

入力時に横幅を広げる 入力テキストにフォーカスが来た時に横幅を広げます。サンプルは親要素を溢れて右側に広がる検索窓となります。検索窓が狭い場所にしか配置できない場合は有効な手段となります。
	HTML CSS 表示
虫眼鏡マークと付けてENTERで検索実行 テキスト内に虫眼鏡マークを背景画像として付けています。formを使用することでENTERで実行可能として検索ボタンが無いサンプルです。
	HTML CSS 表示
検索テキスト内にボタンを配置する 検索テキスト内にボタンを配置するサンプルです。
	HTML CSS 表示
検索ボタンの画像が変化する 検索用の虫眼鏡ボタンにマウスが乗った時に「GO」の画像に変化するサンプルです。画像の入れ替えと合わせて背景色の変更も行っています。
	HTML CSS 表示
検索ボタンが回転する 検索用の虫眼鏡ボタンにマウスが乗った時に、ボタンが回転するサンプルです。回転と合わせて背景色の変更も行っています。
	HTML CSS 表示