商用利用OK、加工OK、許可不要、ALL無料のホームページ素材集

WEBデザイナーが作った超シンプル素材集

TIPS MENU

MATERIAL MENU

がんばろうニッポン

CSSサンプル

ここでは、ちょっと役立つCSSをメモ程度に置いていきます。
ご自由にお使いいただけますが、設置後の動作を保障するものではありませんのでご注意ください。

フォーカスされたフォームオブジェクトの色を変える

フォームを入力する時、カーソルは表示されているけど見にくい感がありますよね。そういう時にはカーソルがある(フォーカスされた)フォームオブジェクトだけ背景色を変えるとわかりやすいフォームになります。ついでに枠線の色を変えたりするともっとオシャレに♪

◎ワンポイントメモ
※inputの後ろに[type=”text”]をつけることで、テキストフィールド以外に適用されません。
※focusは残念ながらIE7までは対応していません(泣)。IE8以降は対応しています。

::::: CSS表記 :::::

.sample005 {
margin:0px;padding:10px;
line-height:1.8em;
}
.sample005 form {
margin:0px;padding:0px;
}
.sample005 input[type="text"] {
border:1px solid #0000CC;
background-color:#FFFFFF;
}
.sample005 input[type="text"]:focus {
border:1px solid #FF6600;
background-color:#FFFFCC;
}

::::: HTML表記 :::::

<div class="sample005">
<form>
氏名:
<input type="text" name="textfield" value="" />
<br />
住所:
<input type="text" name="textfield" value="" />
<br />
電話:
<input type="text" name="textfield" value="" />
<br />
<input type="submit" name="Submit" value="送信" />
</form>
</div>

::::: 動作確認 :::::
氏名:


住所:


電話:


更新日:2011.01.23 Category:CSSサンプル
HOMEへ このページのTOPへ