php - CSS :Before 疑似要素を使用した選択リストの色見本。Firefox でのみ動作します

Question

ここで見ることができるカスタム ストール コンフィギュレーターに取り組んでいます: stoles.com/stoles サイトはパスワードで保護されており、ユーザー名は「alex」、パスワードは「superman」です。

ストールの色、トリムの色、テキストの色の標準の html 選択リストがあります。各選択オプションの左側に色見本を追加しようとしています。これを実現するために、CSS 疑似要素「:before」を実装しました。問題は、Firefox でのみ動作し、Chrome、Safari、または IE では動作しないことです。少なくとも chrome、safari、IE9+、Firefox で動作する必要があります。クレイジーなjqueryリストを使用してプラグインのタイプを選択せず​​に、選択オプションの横に色見本を表示する方法はありますか? ここでは、標準の選択リストに固執したいと思います。

これが私のコードです：

<select class="" name="stoleColor" id="stoleColor">
                    <option value="">...</option>
                    <option class="colorSwatch cAntiqueGold" value="antique-gold">Antique Gold</option>
                    <option class="colorSwatch cBlack" value="black">Black</option>
                    <option class="colorSwatch cBrown" value="brown">Brown</option>
                    <option class="colorSwatch cEmeraldGreen" value="emerald-green">Emerald Green</option>
                    <option class="colorSwatch cGold" value="gold">Gold</option>
                    <option class="colorSwatch cGreen" value="green">Green</option>
                    <option class="colorSwatch cHunterGreen" value="hunter-green">Hunter Green</option>
                    <option class="colorSwatch cLightBlue" value="light-blue">Light Blue</option>
                    <option class="colorSwatch cMaroon" value="maroon">Maroon</option>
                    <option class="colorSwatch cNavyBlue" value="navy-blue">Navy Blue</option>
                    <option class="colorSwatch cOrange" value="orange">Orange</option>
                    <option class="colorSwatch cPink" value="pink">Pink</option>
                    <option class="colorSwatch cPurple" value="purple">Purple</option>
                    <option class="colorSwatch cRed" value="red">Red</option>
                    <option class="colorSwatch cRoyalBlue" value="royal-blue">Royal Blue</option>
                    <option class="colorSwatch cSilver" value="silver">Silver</option>
                    <option class="colorSwatch cWhite" value="white">White</option>
                </select>

そして、ここに私のCSSがあります:

    option.colorSwatch:before {
    content: " ";
    height: 10px;
    width: 20px;
    border-radius: 0px;
    border:2px solid #ebebeb;
    margin-right:10px;
    display: inline-block;
}

option.cAntiqueGold:before {
    background:#9C6600;
}