如何在选择选项内更改跨度的颜色? [英] How to change color of span inside select option?

问题描述

如何在选择选项中将跨度颜色更改为红色? 在JS小提琴中，我想将<span class="myError">This is a required field.</span>的颜色更改为红色

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>

推荐答案

在这里，幻想是使用select和mix-blend-mode上方的覆盖层，然后使用CSS varibale控制颜色的变化.

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>

这篇关于如何在选择选项内更改跨度的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！