How to change color of span inside select option?

Question

How to change span color to red in select option? in js fiddle i want to change color of <span class="myError">This is a required field.</span> to red color

select{
  color: green;
}
select option { color: black; }

select option .myError{
  color:red
}

<select >
 <option value="">Color:
 <span class="myError">This is a required field.</span>
 </option>
 
 <option value="17">Color: Midnight Blue</option>
 
 <option value="18">Color: Radar Red</option>
 
 </select>

An option element cannot have any child elements. you should consider using select plugins for this — Milind Anantwar, Feb 28 '18 at 07:42
In fact, you cant do this. See more: https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select — Alexander Demichev, Feb 28 '18 at 07:44

Temani Afif · Accepted Answer · 2019-06-04T10:52:08.160

Here is a fancy idea using an overlay above the select and mix-blend-mode, then I control the change of color using CSS varibale.

$('select').change(function(){
   $(this).parent().attr('style','--color:'+$(this).find(':selected').data('color'));
})

.select {
  position: relative;
  display: inline-block;
  --color:red;
}

.select:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 1px;
  bottom: 1px;
  left: 40px;
  background: var(--color);
  mix-blend-mode: lighten;
}

select option {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
  <select>
 <option value="" disabled selected>Color: This is a required field. </option>
 
 <option value="17" data-color="blue">Color: Midnight Blue</option>
 
 <option value="18" data-color="pink">Color: Radar Red</option>
 
 </select>
</div>

score 1 · Answer 2 · answered Feb 28 '18 at 07:51

1

After rendering DOM you can inspect element it, you will see span will be remove. That's why css style properties are not working because there is not span or class .myError exist.

In other words option tag cannot allow other tags.

answered Feb 28 '18 at 07:51

Ayaz Ali Shah

3,453
9
36
68

score 0 · Answer 3 · answered Feb 28 '18 at 07:54

You cannot use a html tag inside <option> tag. However you can achieve this using css:

select{
  color: red;
}
select option { color: black; }

select option:first-child{
  color:red
}

.mid-blue{
  color: #0000CD;
}

.radar-red{
  color: #FF0000;
}

<select >
 <option value="">Color:This is a required field
 </option>
 
 <option class='mid-blue' value="17">Color: Midnight Blue</option>
 
 <option class='radar-red' value="18">Color: Radar Red</option>
 
 </select>

Note: This doesn't work in Google Chrome on Mac OSX; – Gobbin Feb 28 '18 at 07:58 — Gobbin, Feb 28 '18 at 07:58

How to change color of span inside select option?

3 Answers3

Linked