Question

我正在尝试设置在php中创建的select元素。选择代码非常简单，我可以设置下拉列表的文本颜色。但是，当选择选项时，这不会对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;
}

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

我做了JSFiddle来证明这一点。

Answer 1

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

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

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

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

1 个答案: