0

我正在开发一个自定义的偷窃配置器，可以在这里查看：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;
}
4

0 回答 0