acky info

連絡先

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

ads

:focusを使って入力中のフォームに背景色をつける

2010/7/22 :hoverに関する追記

疑似クラスの:focusを使いフォームの入力中の時のinputやtextareaの背景色やborderを変えることで、選択中の入力枠が分かりやすくなります。
なお、:focusはフォーム専用というわけではなく、どの要素にも使うことができます。

まずは通常のデザインのフォームに指定する場合です。
:focusを付け背景色を指定します。
borderも指定できますがブラウザにより枠のデザインが異なるので通常のデザインを使う場合は背景色だけの方が良いでしょう。表示サンプルのtextareaのようにborderを指定している場合は:focusの時にもborderを指定すると、より分かりやすくなります。

IE6、７では:focusはに対応していないのでほぼ同じようにするには、csshover3を読み込み:hoverで対処する必要があります。csshover3は「CSSで作るプルダウンメニュー」に詳しく載っています。
また、:hoverを指定しておく事でモダンブラウザでもマウスカーソルがinputやtextareaの上に乗ったときに色が変わるのでより分かりやすくなるでしょう。

input,textarea{
padding:3px;
}

input:focus{
background: #bebeff;
}

textarea{
border:#333333 1px solid;
}

textarea:focus{
background: #bebeff;
border:#000099 1px solid;
}

input
textarea

backgroundは背景色だけでなく背景画像も指定できるので、ページのデザインに合わせた枠を画像で用意している場合にも活用できます。
しかし、IE7以前には背景画像のリピートが適切に指定できません。

input{
background:url(input.png) no-repeat left top;
border:none;
width:150px;
height:30px;
padding:5px 15px;
}

input:focus{
background:url(input.png) no-repeat left bottom;
}

textarea{
background:url(textarea.png) no-repeat left top;
border:none;
width:150px;
height:60px;
padding:15px;
overflow:auto;
}

textarea:focus{
background:url(textarea.png) no-repeat left bottom;
}

input
textarea
ads

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

お薦めの参考書

CSS、webデザイン学習書籍、参考書をアマゾンで購入する

Copyright (C) acky. All Rights Reserved.