2

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.

Programador Adagal
  • 780
  • 14
  • 39
  • 3
    Possible duplicate of [How to style a select dropdown with CSS only without JavaScript?](http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript) – Stefano Saitta Jan 07 '16 at 18:27
  • 2
    Possible duplicate of [Change an input's HTML5 placeholder color with CSS](http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) – Stefano Saitta Jan 07 '16 at 18:28
  • Thanks both of you for your answers, but is a little more complicated. I edited to better explain what I need to achieve. – Programador Adagal Jan 08 '16 at 08:35

1 Answers1

1

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.

Community
  • 1
  • 1
fnune
  • 5,256
  • 1
  • 21
  • 35
  • Thanks a lot for your help, but I guess I did a bad explanation. In my HTML I have 5 options with one different color each. What I need is not the options highlighted or even changed the color, I need to change main select box as is seen depending on the element selected (is a bit difficult to explain, sorry). – Programador Adagal Jan 08 '16 at 08:29
  • 1
    I'll look at it later. I think I get what you mean. – fnune Jan 08 '16 at 08:51