web関係、制作関係でのよしなしごとを書いています。
2010/7/11 絶対パスの書き方を変更
検索ボックスに使うinputタグをそのまま使うとOSに準じたデザインになりますが、ページにそのデザインが合わない場合はCSSで整える必要があります。そこでページのデザインに合わせた検索ボックスのCSSの調整法について解説します。
方法としては検索ボックスの枠を背景画像に置き換え、枠を取り、ボタンを変更します。
最初に、formタグの背景画像を指定します。これが検索ボックスの枠になります。
次に、inputの枠をborder:none;で消し、paddingやvertical-align、positionなどで表示される位置を調整します。
細かな調整法については「フォームのradiobutton、checkbox、selectのずれを調整する」を参考にしてください。
最後に、input type="image"で検索ボタンを画像のボタンに置き換えます。
検索ボタンが:hoverの時にalphaで消えるように透明度を調整します。また、a以外の:hoverにIE6は対応していないのでliにcsshover3を読み込むように指定します。
alphaは「疑似クラス:hoverを使ったロールオーバー」に、csshover3は「CSSで作るプルダウンメニュー」に詳しく載っています。
form{
background:url(bg.png) no-repeat left top;
}
.style_1{
border:none;
padding:0px 10px;
width:145px;
vertical-align:11px;
font-size:1.4em;
}
.style_2{
margin:4px 0px;
behavior: url("/csshover3.htc");
}
.style_2:hover{
filter: alpha(opacity=0);
opacity: 0.0;
}
<form>
<input type="text" class="style_1" />
<input type="image" src="button.png" class="style_2" />
</form>
初めまして。そして、ようこそ!京都でwebデザイナー、htmlコーダーをやっているackyです。
このサイトはでイラストレーションギャラリーとCSSのテクニックを紹介しています。
イラストレーションでは、主にF1やスーパースポーツ、モータースポーツをテーマにトレース技法で描いています。イラストのポイントは直線で構成したソリッドでシャープな質感です。
CSSテクニック、webの小技ではweb制作の時にちょっと役に立つようなCSSテクニックや、positionのrelative、absoluteの使い方、リスト(li)の横並びや、リスト(li)横並びの中央寄せ、フォームのチェックボックスやラジオボタンとテキストのずれを揃える方法、Photoshopのチャンネルを使った髪の毛の切り抜き方法、お気に入りアイコン(ファビコン、webアイコン)の作り方などを紹介しています。
(このサイトについて何がありましたら左記のアドレスからご連絡をお願いします)