Question

我想有一个select元素，允许人们预览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>

提前致谢

Pluda

Answer 1

据我所知，无法在Chrome中完成。但是，您可以使用jQuery插件来模拟它：

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

我使用了jqTransform

的略微修改版本

css样式适用于Firefox（win和mac） - 设置选择选项样式

1 个答案: