ブラウザの互換性の問題OPTGROUPタグにCSSセレクタの前に::使用している場合

Question

次のコードを取得Chromeのみで望ましい結果：

HTML：

<select multiple style="width:500px"> 
    <optgroup class="outg" label="Swedish Cars"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    </optgroup> 
</select> 

CSS：

.outg::before { 
    content: ""; 
    border-style: solid; 
    border-width: 7px 0 7px 7px; 
    border-color: transparent transparent transparent #656565; 
    float: left; 
    margin-right: 3px; 
    width: 10px; 
} 

https://jsfiddle.net/2ny35p94/3/

---

クロム58 - 三角形とラベルの両方が表示されます

のFirefox 53 - のみの三角形が表示される：

IE 11 - ラベルのみが表示される：

---

任意のsuggestiどのようにクロスブラウザ互換にするには？

Answer 1

デフォルトの::beforeを上書きしているため、両方を表示することはできません。これはブラウザとまったく同じです。 Chromeはそれを適用しているようですが、標準仕様ではありません。この場合、FirefoxとIEは期待どおりに動作しています。

<optgroup>タグは、このようブラウザでスタイリングされています。あなたはcontentプロパティをオーバーライドする場合

optgroup[label]::before { 
    content: attr(label); 
} 

、あなたができることは何もありません。

私の提案は、コードのcontentプロパティを削除することですが、別の関連する問題を修正する必要があります。スクリーンショットを参照してください。

が働いて、それを参照してください：あなたもそれでCSSを投げ始める前に、

https://jsfiddle.net/2ny35p94/4/