javascript - 如何更改选择选项内跨度的颜色？

Question

如何在选择选项中将跨度颜色更改为红色？在 js fiddle 中我想改变 <span class="myError">This is a required field.</span> 的颜色变红

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>

Answer 1

这是一个奇特的想法，在选择和 mix-blend-mode 上方使用叠加层，然后我使用 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>