如何更改選擇選項內的跨度顏色？

Question

如何在選擇選項中將跨度顏色更改為紅色？ 在js小提琴我想改變<span class="myError">This is a required field.</span>顏色<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> 

Answer 2

渲染DOM后，您可以檢查元素，您將看到跨度將被刪除。 這就是為什么css樣式屬性不起作用的原因，因為沒有span或類.myError存在。

換句話說，選項標簽不允許其他標簽。

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>