この業界に両足をどっぷり突っ込んで13年、まだまだ知らないことばかりですギャフン。
そーです。今更ですがCSS2の属性セレクタを今日初めて知りました。そして初体験です。
html要素内の属性や、その値にマッチさせるスタイルを指定することが出来るんですって！（って、これって常識なの？）
いつもはinput要素のtype＝”text”など、idやclassを書いてスタイルを指定してました。
悔しいので今回はhtml5のinput要素とあわせてサンプルを作ってみました。
まずはhtml
html5ではinput要素のtype属性の値が増えています。
例えばtype属性にemailを指定すると送信ボタンを押した際に入力した値がメールアドレスとして妥当かをチェックしてくれます。（IEはきっと無理。多分。確認してない。ごめんなさい。時間あったらやっとく。対処法とか。まーjsだろうけど。）
そして今回やりたいことは、それぞれのinput要素にアイコンを付けたいんです。
そー。ここでいつもはidやclassを使ってました。
しかし、属性セレクタを使えばスマートなhtmlとCSSを実現出来ます。てか出来ました。
/*共通スタイル*/
input[type="email"],[type="url"],[type="date"] {
padding:5px 5px 5px 25px;
border:1px solid #ddd;
border-radius:6px;
box-shadow:inset 0 0 2px 2px #e1e1e1;
}
/*サイズとアイコンを指定*/
input[type="email"] {
width:300px;
background:#eee url(img/mail.png) left center no-repeat;
}
input[type="url"] {
width:400px;
background:#eee url(img/url.png) left center no-repeat;
}
input[type="date"] {
background:#eee url(img/cal.png) left center no-repeat;
}
要素名[属性＝”値”]と指定することによってスマートなコーディングができます。
今回はinput要素を取り上げましたけど他の要素、または属性名だけでも指定は可能です。
詳しくは「TAG＜index＞」を見たらいいんじゃね？
