Chrome では input (checkbox) に before や after でデザインを作れたので 何にでも擬似要素は作れると思っていたのですが input (text) や textarea では動きませんでした

擬似要素がつかえるところ

調べてみると 「擬似要素は要素の内側に来るので 内側に要素を書けるところでだけ使える」 なようで textarea や input は書けないのが仕様的には正しいみたいです

ですが checkbox なんかは デフォルトのデザインではなく独自のデザインを上にのせることが多いと思います
なので checkbox に before や after をつけることができるとすごく楽になります

Chrome はその辺まで考えていて checkbox では使えるようにしてくれてるのかな って思うんですが Firefox で使えない以上 別な方法をとるべきかなとも思えます
え？ IE？ そんなのどうでもいいでしょ



checkbox と textarea のサンプルです
http://var.blog.jp/s/textarea-input-before.html

Chromeではこんなになってるかと思います

ボタンを押すと下側のようになります


Chromeではこうするだけで簡単にデザインが作れます


input:before が使えないとという構造にしてとやらないといけないです
label を input の上にかぶせて 大きさも合わせないといけないので before のように内側にあるのと違ってやることが多いです


一応 Chrome で 擬似要素が使える要素を調べてみました

input系の使いそうなもので つかえるのは
checkbox, radio, range, date, button, file, image, color

使えないのは
submit, reset, text, number, password

となりました

button が使えるのに submit や reset は使えないんですね
ボタンなのに

おまけ

使える使えないの基準が 内側に要素が書けるか だったので Firefox だと img タグって <img></img> 形式になってたっけ と思ってためしてみると

動きました

ですが Chrome では動きません
おまえら そろそろ動きあわせろよ！！

ついでに <br> ももしかして とやってみましたが これはさすがにどっちもムリでした
ん？IE? だからそんなの知らないって