html - 如何制作：在 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/abud/EAdvP/

Answer 1

抱歉，但大多数浏览器并没有为您提供样式select和option元素的许多 CSS 可能性。Firefox 在这件事上相当宽容——其他人则不然。

我必须告诉你，以目前的形式，你的代码不能跨浏览器工作。您仍然可以选择（通过使用 Javascript）select用一些可样式化的元素替换该元素，并使它们像一个下拉框。有许多图书馆可以做到这一点。