CODEWITHSUNDEEP
javascriptjqueryhtmlcss
pavlos163
pavlos163

Reputation: 2890

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

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.

Upvotes: 0

Views: 1455

Answers (2)

Gerard
Gerard

Reputation: 15786

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>

Upvotes: 0

Bharatsing Parmar
Bharatsing Parmar

Reputation: 2455

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>

Upvotes: 1

Related Questions