検索窓（フォーム）をカスタマイズする
こんな感じでスタイリッシュな検索フォームに仕上げました。
窓とボタンをくっつけて、ボタン部分には背景画像を指定し、マウスオーバーで色が変わります。
やり方は以下のとおりです。
検索窓とボタンにidを設定します。
例として、
検索窓→ <input type=”text” id=”kensakumado” ……..
ボタン→ <input type=”submit” id=”kensakubotan” ……..
こんな感じに。
上のCSSの例は、
検索窓
input#kensakumado {
width: 400px;
height: 28px;
font-size: 120%;
border: 1px solid #DCDCDC;
padding: 0px;
margin: 0px;
}
ボタン
input#kensakubotan {
width: 65px;
height: 30px;
background: url(イメージの置き場所) ;
border-top: 1px solid #DCDCDC;
border-bottom: 1px solid #DCDCDC;
border-right: 1px solid #DCDCDC;
border-left: 0px ;
/*box-shadow: 0px 1px 1px 0px #C0C0C0;*/
padding: 0px;
margin: 0px;
}
ボタンマウスオーバー時
input#kensakubotan:hover {
background: url(イメージの置き場所) ;
padding: 0px;
margin: 0px;
}
窓とボタンの間にある隙間を埋めるのは、ｈｔｍｌの記述を横にずらっと並べて、paddingとmarginを0pxとしました。
ボタン部分に背景画像「background: url(イメージの置き場所) ;」を指定し、マウスオーバーで違う画像を見せます。
ただ検索フォームを改良するだけでも結構面倒なものですね。
こんなものぐらいデフォルトであるといいんですけど。。。