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）：

＆＃13;

input

＆＃13;

option:checked {
  color:lightgreen;
}

＆＃13;

在悬停时更改项目的样式：

不幸的是，我还没有设法让它只使用CSS，它只适用于<select name="color_tarea" id="color_tarea" style="font-family: 'FontAwesome', Arial;" class="form-control"> <option value="danger" class="text-danger"> Máxima prioridade</option> <option value="warning" class="text-warning"> Prioridade elevada</option> <option value="info" class="text-info"> Información</option> <option value="primary" class="text-primary"> Pouco importante</option> <option value="success" class="text-success"> Cando se poda</option> </select>或更高（即不是1）。这在jQuery上运行：

＆＃13;

size="2"

＆＃13;

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

＆＃13;

唉，当<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"> Máxima prioridade</option> <option value="warning" class="text-warning"> Prioridade elevada</option> <option value="info" class="text-info"> Información</option> <option value="primary" class="text-primary"> Pouco importante</option> <option value="success" class="text-success"> Cando se poda</option> </select>属性高于1时，仅CSS解决方案不起作用。

备选方案：

您可以使用this one之类的库。或者您可以使用旧的ul＆gt; li设置构建自己的下拉列表。

基于this和一些研究的答案。这就是我能做到的，祝你好运。

CSS - 选择框，如何使用所选选项

1 个答案:

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

在悬停时更改项目的样式：

备选方案：