Mozilla Firefox issue. HTML select (drop-down menu) colouring of some options by their value

Question

I want to colour some options in select field (HTML) using JS/Jquery based on the values of the select options assigned. Here is my code:

        $('#selectField option[value="val1"]').css({ 'color': 'green' });

The code does its job perfectly in the Google Chrome and Internet Explorer, but in Mozilla Firefox nothing happens. Has anybody an alternative for this browser to suggest? The solution must be in JS not in CSS. Thank you!

Possible duplicate of [How to style a select tag's option element?](http://stackoverflow.com/questions/5887133/how-to-style-a-select-tags-option-element) — Steyn, Mar 09 '17 at 07:42
`#selectField option[value="val1"]{ color: green; }` in **CSS** — GROVER., Mar 09 '17 at 07:42
I must have it in JS not in CSS, because "val1" depens on a situation...I simplified the code above to highlight the issue.. — Nenad Savic, Mar 09 '17 at 07:44

GROVER. · Answer 1 · 2017-03-09T08:14:11.617

0

Give this a shot, it is done in vanilla JS:

var option = document.querySelectorAll("#selectField option");

for(var i = 0; i < option.length; i++){
    if(option[i].value === "val1"){
        option[i].style.color = "green";
    }
}

Hopefully, it helps :)

edited Mar 09 '17 at 08:14

answered Mar 09 '17 at 07:48

GROVER.

4,071
2
19
66

Nope :( Nothing hapens – Nenad Savic Mar 09 '17 at 08:11
@sawic try now? – GROVER. Mar 09 '17 at 08:14
This colours all options contained. Actually, colors onyl the selected option...but any of them, when selected. – Nenad Savic Mar 09 '17 at 08:22

Mozilla Firefox issue. HTML select (drop-down menu) colouring of some options by their value

1 Answers1