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

Question

I am trying to style a select element that is created in php. The select code is very simple and I can style the text color of the drop down. But this doesn't style the select element when a option is selected. Also this code doesn't work on Safari at all.

Code:

<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. How do I style the default select so that it matches the option style rule?
2. How to get this to work on Safari? Possibly IE I haven't checked it yet no Windows system ATM.
3. Is there a way to get these rules to display an image as well? I've tried a few things but seems it requires Javascript which I try to avoid when I can.

I made a JSFiddle to demonstrate this.

Answer 1

There's no way you can accomplish this without JavaScript:

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

Here's your fiddle: http://jsfiddle.net/uCmSR/2/