テキストボックス(input)やテキストエリア(textarea)をきれいに

focus
テキストボックス(input)やテキストエリア(textarea)を
マウスあてたとき(focus)きれいに見せたい。

■その1
focus2

input:focus, textarea:focus { background-color:#FFFFE8; }
背景色だけ指定すると、フォーカス時にボーダーがおかしなことに。

radio■その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として使えそう♪

Comments:0

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://www.otogawa.com/cms/mt-tb.cgi/254
Listed below are links to weblogs that reference
テキストボックス(input)やテキストエリア(textarea)をきれいに from px*blog