テキストボックス(input)やテキストエリア(textarea)を
マウスあてたとき(focus)きれいに見せたい。
■その1
input:focus, textarea:focus { background-color:#FFFFE8; }背景色だけ指定すると、フォーカス時にボーダーがおかしなことに。
■その2
input,
textarea {
border: solid 1px #999;
background-color:#fff;
}
input:focus,
textarea:focus {
border: solid 1px #999;
background-color:#FFFFE8;
}
とかってボーダー指定すると、Firefoxとかでは問題ないんだけど、
IEでは、チェックボックス(checkbox)やラジオボタン(radio)ボーダーがもれなくついてくる。(おい!w)
フォーカス色つけるものをいちいち選別してクラスつける??
ボーダーをつけないinput[checkbox]&[radio]にいちいち除外用クラスつける??
ナンセンスでしょ。。。(´`;)
■その3★★★
input[type="text"],
input[type="password"],
textarea {
border: solid 1px #999;
background-color:#fff;
}
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
border: solid 1px #999;
background-color:#FFFFE8;
}
てゆーかそもそもフォーカスってIEじゃ効かないし。
inputのtypeがcheckboxもしくはpassword、
textarea
この3点でいいやんか。と。
-------------
・javascriptでIEでもフォーカス時に.focusてクラスを付随してくれる技
// focus for IE
$(function(){
$("input[@type='text'],textarea")
.focus(function(){
$(this).addClass("focus");
})
.blur(function(){
$(this).removeClass("focus");
});
});
とか、
・試してないけど、入力フォームをすてきにしてくれる↓
Janko At Warp Speed - Enhance your input fields with simple CSS tricks example
とか、
巷には色々ありますけれど。
重い!
とSEさんに言われました_| ̄|○
だから、開き直ってIE以外で優遇アクセシビリティ向上、で目指します。
クラスつける手間もなし!
javascriptいらないし!
私はIE使わないし!
結構デフォルトcssとして使えそう♪