CODEWITHSUNDEEP
jqueryhtmlcss
Programador Adagal
Programador Adagal

Reputation: 780

CSS - Select box, how to change text color with the selected option

I have this select input:

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

Every option has his own text color. Now I want to change the main color (selected option) with the color selected. I can't find a way with only CSS, how can I get the class of the selected option for changing it with jQuery?

Thanks in advance.

EDIT: The question marked as possible solution is not my solution. That is for changing the placeholder (text of an input when is no text written). I need the text on the main select box (not an option) changes with the color of the chosen option. I wonder this explains correctly the situation.

Upvotes: 2

Views: 3602

Answers (1)

fnune
fnune

Reputation: 5494

It's not very easy with CSS only. Here are some options:

Changing the style of the selected element (CSS only):

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>

Change the style of the item on hover:

unfortunately I haven't managed to make it work with CSS only, and it only works on size="2" or higher (i.e. not 1). This runs on 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>

Alas, the CSS only solution doesn't work when you make the size attribute higher than 1.

Alternatives:

You can use a library like this one. Or you could build your own dropdown with a good old ul>li setup.

Based my answer on this and some research. That's as much as I can do, best of luck to you.

Upvotes: 1

Related Questions