Change color in select option - HTML/CSS/JQuery - Mac

Question

I want to change the text colour of several options in select dropdown.

I don't care about which one is selected. I just want the user to see, when opening the dropdown menu, some options as yellow (in this example).

<select>
   <option>Black</option>
   <option>Black</option>
   <option style="color: rgb(255, 255, 0);">Yellow</option>
</select>

This is my JSFiddle

Other solutions in Stackoverflow haven't worked for me in Chrome 59.

I also want to be able to change the colour of the options with Javascript/JQuery like so:

var option = AJS.$('<option>', {...});
option.css("color", "#2ee4ff");

I can't manage to make the colours work at all, however.

Answer 1

You can try this:

 $("select option").each(function(){ value=$(this).val(); $(this).css("color",value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option>Black</option> <option>Black</option> <option>Yellow</option> </select> 

Answer 2

I got frustrated with the possibilities to style a select box a long time ago and created an alternative. Maybe this helps you.

It uses a ul to display the options and stores the chosen value in the div being displayed on the screen and the input tag for further processing.

 $("body").on("click", ".selected", function() { $(this).next(".options").toggleClass("open"); }); $("body").on("click", ".option", function() { var selected = $(this).find("span").html(); $(".selected").html(selected); $("input[name='mySelect']").val(selected); $(".options").toggleClass("open"); }); 

 .container { display: flex; flex-wrap: wrap; width: 25%; } .selected { border: thin solid darkgray; border-radius: 5px; background: lightgray; display: flex; align-items: center; cursor: pointer; height: 1.5em; margin-bottom: .2em; padding-left: .5em; min-width: 150px; position: relative; } .selected:after { font-family: FontAwesome; content: "\\f0d7"; margin-left: 1em; position: absolute; right: .5em; } .options { display: none; margin: 0; padding: 0; } .options.open { display: inline-block; } li { display: flex; justify-content: flex-start; align-items: center; cursor: pointer; } li>img { margin-right: 1em; } .yellow { color: yellow; } .blue { color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="container"> <form> <input type="hidden" name="mySelect" value=""> <div class="selected">Select an option</div> <ul class="options"> <li class="option yellow"><span>Option 1</span></li> <li class="option"><span>Option 2</span></li> <li class="option blue"><span>Option 3</span></li> </ul> </form> </div>