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

Question

如何在选择选项中将跨度颜色更改为红色？在js小提琴我想改变<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

渲染DOM后，您可以检查元素，您将看到跨度将被删除。这就是为什么css样式属性不起作用的原因，因为没有span或类.myError存在。

换句话说，选项标签不允许其他标签。

Answer 2

这是一个奇特的想法，使用选择和混合混合模式上方的叠加，然后我使用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>

Answer 3

你不能在<option>标签内使用html标签。但是你可以使用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>