css style just works on Firefox (win and mac) - 设置选择选项样式

Question

我想要一个允许人们预览 css 边框样式的选择元素。

我在考虑将内联样式应用于每个选项，这样可以快速而简单地实现我的目标，但是......

它只适用于 Firefox，Mac 和 Windows 平台，IE，Chrome，Safari，不喜欢这个。是否有任何解决方法可以使此 css 跨浏览器？

CSS代码

.select_border_style {
    border:2px;
    margin:6px;
}

html代码

<select id='borders'>
    <option class='select_border_style' style='border-style:solid;'>solid</option>
    <option class='select_border_style' style='border-style:dashed;'>dashed</option>
    <option class='select_border_style' style='border-style:dotted;'>dotted</option>
    <option class='select_border_style' style='border-style:double;'>double</option>
    <option class='select_border_style' style='border-style:groove;'>groove</option>
    <option class='select_border_style' style='border-style:ridge;'>ridge</option>
    <option class='select_border_style' style='border-style:inset;'>inset</option>
    <option class='select_border_style' style='border-style:outset;'>outset</option>
</select>

提前致谢

普鲁达

Answer 1

据我所知，这不能在 Chrome 中完成。但是，您可以使用 jQuery 插件来模拟它:

http://jsfiddle.net/GzDXc/1/

我使用了稍微修改过的 jqTransform 版本