如何在选择选项中将跨度颜色更改为红色?
在 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>
最佳答案
这是一个奇特的想法,在选择和 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>
关于javascript - 如何更改选择选项内跨度的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49024286/