如何使：在铬和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工作后？

回答

相关问题