属性セレクタでフォーム関連要素をスタイリングしたときの罠

属性セレクタを使用してinput要素やtextarea要素をスタイリングしたつもりが、全然適用されてない。そんな罠に引っかかった。

この不具合は、どうやらSafariとFirefoxで起こるらしく、IE9とOperaでは意図したとおり表示された。

ちなみに不具合の起こったコードは以下のような感じ。

input[type=text][size=10], textarea[cols=10] { width: 10%; }
input[type=text][size=20], textarea[cols=20] { width: 20%; }
input[type=text][size=30], textarea[cols=30] { width: 30%; }
input[type=text][size=40], textarea[cols=40] { width: 40%; }
input[type=text][size=50], textarea[cols=50] { width: 50%; }
input[type=text][size=60], textarea[cols=60] { width: 60%; }
input[type=text][size=70], textarea[cols=70] { width: 70%; }
input[type=text][size=80], textarea[cols=80] { width: 80%; }
input[type=text][size=90], textarea[cols=90] { width: 90%; }
input[type=text][size=100], textarea[cols=100] { width: 100%; }
textarea { line-height: 1.5; }
textarea[rows=1] { height: 1.5em; }
textarea[rows=2] { height: 3em; }
textarea[rows=3] { height: 4.5em; }
textarea[rows=4] { height: 6em; }
textarea[rows=5] { height: 7.5em; }
textarea[rows=6] { height: 9em; }
textarea[rows=7] { height: 10.5em; }
textarea[rows=8] { height: 12em; }
textarea[rows=9] { height: 13.5em; }
textarea[rows=10] { height: 15em; }

このコードでやりたかったことは、input要素のsize属性、textarea要素のcols属性とrows属性の値に応じて、適当な表示領域を確保するというもの。

コード的には間違いないはずなんだけど、これだと指定したとおりに表示されなかった。そこで以下のように手直ししてみた。

input[type="text"][size="10"], textarea[cols="10"] { width: 10%; }
input[type="text"][size="20"], textarea[cols="20"] { width: 20%; }
input[type="text"][size="30"], textarea[cols="30"] { width: 30%; }
input[type="text"][size="40"], textarea[cols="40"] { width: 40%; }
input[type="text"][size="50"], textarea[cols="50"] { width: 50%; }
input[type="text"][size="60"], textarea[cols="60"] { width: 60%; }
input[type="text"][size="70"], textarea[cols="70"] { width: 70%; }
input[type="text"][size="80"], textarea[cols="80"] { width: 80%; }
input[type="text"][size="90"], textarea[cols="90"] { width: 90%; }
input[type="text"][size="100"], textarea[cols="100"] { width: 100%; }
textarea { line-height: 1.5; }
textarea[rows="1"] { height: 1.5em; }
textarea[rows="2"] { height: 3em; }
textarea[rows="3"] { height: 4.5em; }
textarea[rows="4"] { height: 6em; }
textarea[rows="5"] { height: 7.5em; }
textarea[rows="6"] { height: 9em; }
textarea[rows="7"] { height: 10.5em; }
textarea[rows="8"] { height: 12em; }
textarea[rows="9"] { height: 13.5em; }
textarea[rows="10"] { height: 15em; }

やったことは、属性値の部分に引用符を追加しただけ。すると意図したとおり表示された。

色んなサイトのCSSファイルを除くと、結構、引用符は省略されていることが多いんだけど、省略せずに書く癖をつけておくと、つまらないことに時間を奪われずに済むこともあるんだよっていう典型的な例でした。