选择选项的CSS不适用于chrome

时间:2015-03-06 08:08:37

标签: html css

我试图在选择选项中获取颜色选项。这段代码在mozilla中运行良好,但它似乎不适用于chrome:

<style>
.color_box option:after {
content: " ";
height: 15px;
width: 65px;
display: inline-block;
}
option.black:after { background: #000000; }
option.red:after { background: #CB0F0F; }
option.purple:after { background: #8B11AA; }
</style>

<select class="color_box">
<option>Select</option>
<option class="black" value="#000000"></option>
<option class="red" value="#CB0F0F"></option>
<option class="purple" value="#8B11AA"></option>
</select>

1 个答案:

答案 0 :(得分:0)

只是css似乎效果不好。

你想让它像这样工作吗?

http://jsfiddle.net/kvxsjyv0/1/

<style>
        option.black { background: #000000; color:#000000 }
        option.red { background: #CB0F0F; color: #CB0F0F; }
        option.purple { background: #8B11AA;color: #8B11AA; }
        option.default {background: #fff;}

    </style>
    <select class="color_box" onchange="this.style.background = this.value!=''?this.value:'#fff'">
        <option class="default" value="">Select</option>
        <option class="black" value="#000000"></option>
        <option class="red" value="#CB0F0F"></option>
        <option class="purple" value="#8B11AA"></option>
    </select>