CODEWITHSUNDEEP
javascriptjqueryhtmlcss
michltm
michltm

Reputation: 1469

Option selected text color

I have an HTML select form with several options.

I would like to modify the color of the text options but only for certain options. In my Fiddle below, I modified the color for the Tuesday option but the modification is only visible when scrolling the options down. How could I have the specific color also visible for Tuesday when it is selected i.e. at the top of the options?

Fiddle:https://jsfiddle.net/bb61c412/280/

Code:

.form-control {
  color: blue;
}

.selected {
  color: red;
}
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />

<form action="#" id="form" method="post" data-toggle="validator" style='text-align:center;'>
  <div class="form-inline">

    <select class="form-control" name="date">
      <option value="0">
        Date
      </option>
      <option value="1">
        Monday
      </option>
      <option value="2" selected class="selected">
        Tuesday
      </option>
      <option value="3">
        Wednesday
      </option>
      <option value="4">
        Thursday
      </option>

    </select>

  </div>

</form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Upvotes: 1

Views: 203

Answers (2)

Asons
Asons

Reputation: 87191

Here is one way, where it keeps each option's individual color and set the selected (top) to the very same color.

Update

For some reason both Firefox and Edge/IE fail to get an option element's actual style, so I came up with this dirty trick, where a data-color attribute is set on both the select and option elements, and when found on an option, that will be used or else fall back on the default value from the select's data-color. 

function selchanged(el) {
  var col = el.options[el.selectedIndex].getAttribute('data-color');
  if (col) {
    el.style.color = col;
  } else {
    el.style.color = el.getAttribute('data-color');
  }
}
// run once to set on load
selchanged(document.querySelector('.form-control'))
.form-control,
.form-control option {
  color: blue;
}
.form-control option[data-color='#090'] {
  color: #090;
}
.form-control option[data-color='#f00'] {
  color: #f00;
}
.form-control option[data-color='#00f'] {
  color: #00f;
}
.form-control option[data-color='#0ff'] {
  color: #0ff;
}
<form action="#" id="form" method="post" data-toggle="validator" style='text-align:center;'>
  <div class="form-inline">
    <select data-color="#00f" class="form-control" name="date" onchange="selchanged(this);">
      <option data-color="#090" value="0">
        Date
      </option>
      <option data-color="#090" value="1">
        Monday
      </option>
      <option data-color="#f00" value="2" selected class="selected">
        Tuesday
      </option>
      <option data-color="#0ff" value="3">
        Wednesday
      </option>
      <option data-color="#0ff" value="4">
        Thursday
      </option>
    </select>    
  </div>
</form>

Upvotes: 1

Murad Hasan
Murad Hasan

Reputation: 9583

Updated Jsfiddle

Option selected text color

jQuery:

$(function(){
    $("select").on("change", function(){
    $("select option").css("color", "blue");
    $(this).find("option:selected").css("color", "red");
  })
})

$("select option").css("color", "blue");

This line reset the previous color.

$(this).find("option:selected").css("color", "red");

This is the line for color the selected option of the selectbox.

Upvotes: 2

Related Questions