html - 如何制作:after work in chrome and 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 fiddle :http://jsfiddle.net/abude/EAdvP/

Answer 1

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

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