怎么做：在Chrome和IE下班后？

Question

我的代码只适用于Firefox而不是所有浏览器，尽管:after也适用于其他浏览器。

HTML：

<select>
    <option> select </option>
    <option class="red"> one </option>
    <option class="green"> two </option>
    <option class="blue"> three </option>
</select>​

CSS：

option:after {
    content: " ";
    height: 5px;
    width: 5px;
    border-radius: 5px;
    display: inline-block;
}

option.red:after { background: #c00; }
option.green:after { background: #0c0; }
option.blue:after { background: #00c; }

JS小提琴：http://jsfiddle.net/abude/EAdvP/

Answer 1

很抱歉，但是大多数浏览器都没有为样式select和option元素提供很多CSS。 Firefox在这方面相当宽松 - 其他人则不然。

我必须告诉您，在目前的格式中，您的代码无法跨浏览器运行。您仍然可以选择（通过使用Javascript）将select元素替换为一些可设置样式的元素，并使它们像下拉框一样。有很多图书馆可以做到这一点。