如何使：在鉻和IE工作後？

我有這個代碼只適用於Firefox，並不是所有的瀏覽器，但:after也適用於其他人。如何使：在鉻和IE工作後？

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/

來源

2012-08-09 Abude

很抱歉，但大多數瀏覽器不給你造型select和option元素很多CSS可能性。 Firefox在這件事情上相當寬鬆 - 其他則不然。

我必須告訴你，在目前的形式下，你的代碼不能跨瀏覽器工作。您仍然可以選擇使用（使用Javascript）替換select元素與一些可風化元素，並使它們像下拉框一樣。有很多圖書館可以做到這一點。

來源

2012-08-09 20:56:16 kapa

感謝您的答案，但'後'在所有瀏覽器兼容，新的至少，它應該工作得很好，但不知道爲什麼不... – Abude 2012-08-09 20:58:07

@Jimmy我不是100％肯定，但我認爲這與你在選項之後添加彩色塊並且不在其中的事實有關。 Firefox顯然會呈現選擇菜單中的所有內容，但其他瀏覽器可能不會。 – Tom 2012-08-09 21:01:13

@Jimmy事實上，''之後'和'之前'在大多數瀏覽器中都不適用於大多數表單元素。另見http://stackoverflow.com/questions/2587669/css-after-pseudo-element-on-input-field – kapa 2012-08-09 21:01:52

如何使：在鉻和IE工作後？

回答

相關問題