CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ganesh Godshelwar
Ganesh Godshelwar

Reputation: 67

How to change color of span inside select option?

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 enter image description here

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>

Upvotes: 1

Views: 4954

Answers (3)

Temani Afif
Temani Afif

Reputation: 272919

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>

Upvotes: 3

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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>

Upvotes: 0

Ayaz Ali Shah
Ayaz Ali Shah

Reputation: 3541

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.

Upvotes: 1

Related Questions