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

Question

我正在尝试设置在 php 中创建的选择元素的样式。选择代码非常简单，我可以设置下拉菜单的文本颜色样式。但这不会在选择一个选项时设置选择元素的样式。此外，此代码根本不适用于 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();

这是你的 fiddle :http://jsfiddle.net/uCmSR/2/