16

この StackOverflow の回答では、CSS3 を使用してチェックボックスのスタイルを設定する方法について説明しています<label>。

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

フィドル

これは Chrome 22 では機能しますが、Firefox 15 または IE 9 では機能しません。

後者の 2 つのブラウザーがサポートされていないことを考えると、Chrome の動作は CSS3 仕様に従って有効ですか?

4

4 に答える 4

17

これは未知の土地です。仕様は物事を明確にしません。CSS 2.1仕様には次のように書かれています：

"ノート。この仕様は、:before および :after と置き換えられた要素 (HTML の IMG など) との相互作用を完全には定義していません。これは、将来の仕様でより詳細に定義される予定です。」そして、議論の余地はありますが、INPUT はCSS 2.1 の意味で置き換えられた要素と見なされる可能性があります。

これらの疑似要素は、IMG や INPUT など、コンテンツを持たない (つまり、EMPTY 宣言されたコンテンツを持つ) 要素には使用できないと考えるかもしれません。ただし、文言は IMG に言及しており、付録 Dにはセレクターに関する規則がありbr:beforeます。

また、推奨ステータスに達した数少ない CSS3 の 1 つである CSS3 セレクターは、問題を解決していません。それは言います：

「::beforeおよび::after疑似要素を使用して、要素のコンテンツの前または後に生成されたコンテンツを記述することができます。それらは CSS 2.1 [CSS21] で説明されています。」</p>

于 2012-10-11T06:30:25.053 に答える
8

Chrome の動作がおかしいと思います。here を見ると、ターゲット要素の の前または後に、::beforeおよび::after疑似要素が new を追加すると書かれています。入力要素には;はありません。彼らはただ持っています。たとえば、することはできません。contentcontentcontentvalue<input>Pasta</input>

これがすべて当てはまる場合、IE と Firefox は正しいのに対し、Chrome の動作は正しくないように思われます。

于 2012-10-11T03:32:11.070 に答える