はじめに
IE7からは、スタイルシートで属性セレクタという指定ができるようになりました。このエントリでは、属性セレクタの使い方と注意点を書いています。
属性セレクタの書き方
IE6までは、inputタグの中でパスワードボックスだけに特定のスタイルを指定するということがスタイルシートではできませんでした。ですがIE7からは、属性セレクタという指定の方法で、上記のスタイル指定ができるようになりました。
属性セレクタは、以下のようにタグ名[属性名="xxx"] {}のように指定します。以下の例は、inputタグの中でpasswordという属性を持つすべてのタグに罫線を赤くする指定をしています。
<style TYPE="text/css"> input[type="password"] { border-color: red; } </style>
属性セレクタは互換表示の場合に無視される
この属性セレクタですが、１つだけ注意が必要です。それは、IE7および8がページを互換モードで表示している場合には無視されてしまうことです。
たとえば、以下のようなHTMLを作成して、IEで表示した場合、スタイルの指定が効きません。
<html> <head> <style TYPE="text/css"> <!-- input[type="password"] { border-color: red; } --> </style> </head> <body> <input type="text"><input type="password"> </body> </html>
これはDOCTYPEの指定がないためにIEが自動的に互換モードで表示しているために起こります。HTMLの先頭にDOCTYPEの指定を行った状態で、ページを表示すると属性セレクタの指定が効くようになります。
属性セレクタが効かないなと思ったら、IEのレンダリングモードを確認すると良いと思います。IE8の場合、現在表示中のページをどのレンダリングモードで表示しているのかを調べるには、以下のJavaScriptをアドレスバーに入力するとわかります。5が表示された場合は、互換モードで表示されています。
javascript:alert(document.documentMode);
