3

selectオプション:afterと:before疑似要素を含むリストを作成しました- DEMO

option:after, option::before {
    content: " ";
    height: 5px;
    width: 5px;
    background: #c00;
    border-radius: 5px;
    display: inline-block;
}

ただし、これは Firefox でのみ機能し、他のブラウザーでは機能しません。

W3C、MDN、SitePointで述べられているように、これ:afterは「一致した要素の後にレンダリングされ、化粧品のコンテンツを追加するために使用される疑似要素」であり、適用できない要素に関する制限は誰も述べていません。

質問 - すべてのブラウザー (FF を除く) が疑似要素を正しく表示できないのはなぜですか? どんなドキュメンテーションも大歓迎です。

4

2 に答える 2

6

制限があるかどうかは未定義であるため、一貫性のない動作になります。これは、仕様の関連セクションの下部に記載されています。

ノート。この仕様は、:before および :after と置き換えられた要素 (HTML の IMG など) との相互作用を完全には定義していません。これは、将来の仕様でより詳細に定義されます。

やなど、ほとんどの HTML フォーム要素は置き換えられた要素と見なされselectますoption。

于 2012-08-10T14:06:52.420 に答える
1

これを読んだことがありますか::beforeおよび：after htmlタグの疑似要素がChromeで不安定ですか？

受け入れられた回答は、それがChromeの問題であると述べています。

https://code.google.com/p/chromium/issues/detail?id=75544

于 2012-08-10T14:04:19.657 に答える