michltm michltm - 7 months ago 14
HTML Question

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>




Answer

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>

Comments