javascript - 样式选择与所选选项具有相同样式的元素

Question

我正在尝试设置在 php 中创建的选择元素的样式。选择代码非常简单，我可以设置下拉文本颜色的样式。但这不会在选择选项时设置 select 元素的样式。此外，此代码根本不适用于 Safari。

代码：

<div class="theme">
<select class="theme" name="select_theme">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>
</div>

CSS：

.theme {
    width: 200px;
}
.theme select {
    width: 200px;
    background-color: rgba(200,200,200,0.8);
}
.theme select option[value="red"] {
   color: red;
}
.theme select option[value="green"] {
    color: green;
}
.theme select option[value="blue"] {
    color: blue;
}

1. 如何设置默认选择的样式以使其匹配选项样式规则？
2. 如何让它在 Safari 上运行？可能是 IE 我还没有检查它还没有 Windows 系统 ATM。
3. 有没有办法让这些规则也显示图像？我已经尝试了一些东西，但似乎它需要 Javascript，我尽量避免使用它。

我制作了一个JSFiddle来演示这一点。

Answer 1

如果没有 JavaScript，你就无法做到这一点：

$('select.theme').change(function () {
    $(this).css('color', $(this).find('option:selected').css('color'));
}).change();

这是你的小提琴：http: //jsfiddle.net/uCmSR/2/