1. Home
  2. Webテンプレート
  3. フォーム
  4. 検索ボックス

検索ボックス



ボタンと一体化したテキストボックスを作成するサンプルコードです。


表示例

検索ボックスとしての使用を想定したテキストボックスです。

  • このサンプルでは、境界線を含めたボックスの幅は390pxになります。「ボックスの幅」を変更する場合は、同時に「テキストボックスの幅」も変更してください。(「ボックスの幅」を10px増やす場合は、「テキストボックスの幅」も10px増やしてください)
  • 検索ボタンの部分は、「ボタン」で作成したコードを使用しています(ボタンの幅は80pxに変更してあります)。ボタンの色を変更したい場合は、「--- ボタン ---」以降のコードを入れ替えてください。

使用している画像

btn05.gif btn05.gif

画像へは直接リンクしないでください。ダウンロードしてから使用してください)

画像の制作について

コード

CSSコード


form.search {
margin: 0;
}

/* --- ボックス --- */
form.search div {
width: 388px; /* ボックスの幅 */
padding: 1px 0; /* ボックスのパディング(上下、左右) */
background-color: #ffffff; /* ボックスの背景色 */
border: 1px #808080 solid; /* ボックスの境界線 */
}

/* --- テキストボックス --- */
form.search input.textBox {
width: 298px; /* テキストボックスの幅 */
margin: 0 4px 0 5px; /* テキストボックスのマージン(上右下左) */
padding: 0;
background-color: #ffffff; /* テキストボックスの背景色 */
border: none; /* テキストボックスの境界線(なし) */
color: #000000;
}

/* --- ボタン --- */
form.search input.btn {
width: 80px; /* ボタンの幅 */
height: 1.8em; /* ボタンの高さ */
padding: 0;
background: #c08000 url(btn05.gif); /* ボタンの背景 */
border: 1px #c08000 inset; /* ボタンの境界線 */
font-weight: bold;
color: #000000;
letter-spacing: 0.3em; /* 文字間のスペース */
}

HTMLコード


<form method="get" action="#" class="search">

<div>
<input type="text" name="example" class="textBox"><input type="submit" value="検索" class="btn">
</div>

</form>

備考

  • 各要素の幅や、水平方向のマージン・パディングを変更する場合は、1px単位で正確に設定する必要があります。
  • 2つのinput要素は、横に並べて記述してください。(改行すると余計なスペースが入ってしまい、幅の計算が合わなくなってしまいます)
  • ボックスをセンターに配置したい場合は、「ボックスの幅」の下に margin: 0 auto; を追加してください。

ページの先頭へ