入力：[type = checkbox]に：before擬似要素が許可されていますか？

Question

This StackOverflow answer<label>を必要とせずにCSS3を使用して、チェックボックスのスタイルを設定する方法について説明します。

input[type=checkbox]:before { 
    content:""; display:inline-block; width:12px; height:12px; background:red; 
} 

Fiddle

これは、サポートの欠如を考えるとクローム22で動作しますが、いないのFirefox 15またはIE 9.

後者の2つのブラウザでは、はChromeの動作がCSS3仕様で有効ですか？

Answer 1

これは未知の土地です。仕様は物事をクリアしません。 CSS 2.1 spec says： "注意してください。この仕様では、置き換えられた要素（HTMLのIMGなど）と：beforeと：afterの相互作用を完全に定義するわけではありません。これは将来の仕様でより詳細に定義されるでしょう」と批判的に言えば、INPUTはreplaced element in CSS 2.1 senseと見なすことができます。

これらの擬似要素は、IMGやINPUTなど、コンテンツを持たない要素（つまり、宣言されたコンテンツがEMPTYの要素）には使用できないと考えられるかもしれません。しかし、文言にはIMGおよびAppendix Dにはセレクタbr:beforeのルールがあります。

CSS3セレクタは、CSS3の推奨ステータスに達した数少ない部分のうちの1つで、ではなく、でクリアします。 It says： "The :: beforeおよび:: after擬似要素は、要素の内容の前または後に生成された内容を記述するために使用できます。 CSS 2.1 [CSS21]で説明されています。

Answer 2

Chromeの動作が無効だと思います。 take a look hereの場合、::beforeと::after疑似要素は、ターゲット要素のcontentの前後に新しいcontentを追加します。入力要素にはcontentがありません。彼らはちょうどvalueを持っています。たとえば、<input>Pasta</input>を実行することはできません。

これがすべて当てはまる場合、IEとFirefoxが正しいのに対し、Chromeの動作は無効であるように見えます。