CSS - 选择框，如何使用所选选项更改文本颜色

Question

我有这个选择输入：

<select name="color_tarea" id="color_tarea" style="font-family: 'FontAwesome', Arial;" class="form-control">
    <option value="danger" class="text-danger">&#xf111; Máxima prioridade</option>
    <option value="warning" class="text-warning">&#xf111; Prioridade elevada</option>
    <option value="info" class="text-info">&#xf111; Información</option>
    <option value="primary" class="text-primary">&#xf111; Pouco importante</option>
    <option value="success" class="text-success">&#xf111; Cando se poda</option>
</select>

每个选项都有自己的文本颜色。现在我想用所选颜色更改主颜色（所选选项）。我找不到仅使用 CSS 的方法，如何获取所选选项的类以使用 jQuery 更改它？

提前致谢。

编辑： 标记为可能解决方案的问题不是我的解决方案。那是为了更改占位符（没有写入文本时的输入文本）。我需要主选择框（不是选项）上的文本随所选选项的颜色而变化。我想知道这是否正确地解释了这种情况。

Answer 1

仅使用 CSS 并不容易。 这里有一些选项：

---

更改所选元素的样式（仅限 CSS）：

option:checked {
  color:lightgreen;
}

<select name="color_tarea" id="color_tarea" style="font-family: 'FontAwesome', Arial;" class="form-control">
    <option value="danger" class="text-danger">&#xf111; Máxima prioridade</option>
    <option value="warning" class="text-warning">&#xf111; Prioridade elevada</option>
    <option value="info" class="text-info">&#xf111; Información</option>
    <option value="primary" class="text-primary">&#xf111; Pouco importante</option>
    <option value="success" class="text-success">&#xf111; Cando se poda</option>
</select>

---

更改悬停时项目的样式：

不幸的是，我没有设法使其仅适用于 CSS，它仅适用于 size="2" 或更高版本（即不是 1）。这在 jQuery 上运行：

$(document).ready(function (event) {   
    $('select').on('mouseenter', 'option', function (e) {
        this.style.color = "limegreen";
    });
    $('select').on('mouseleave', 'option', function (e) {
        this.style.color = "black";
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select size="5" name="color_tarea" id="color_tarea" style="font-family: 'FontAwesome', Arial;" class="form-control">
    <option value="danger" class="text-danger">&#xf111; Máxima prioridade</option>
    <option value="warning" class="text-warning">&#xf111; Prioridade elevada</option>
    <option value="info" class="text-info">&#xf111; Información</option>
    <option value="primary" class="text-primary">&#xf111; Pouco importante</option>
    <option value="success" class="text-success">&#xf111; Cando se poda</option>
</select>

唉，当您将 size 属性设置为高于 1 时，仅 CSS 的解决方案将不起作用。

---

替代方案：

您可以使用this one 之类的库。或者您可以使用旧的 ul>li 设置构建自己的下拉菜单。

基于我的回答 this 和一些研究。我能做到的就这么多了，祝你好运。