HTML Выберите тег Option, имеющий цвета differemt в той же строке или той же опции

Question

Существует новое требование, в соответствии с которым нам нужно иметь другой цвет для одного элемента списка выбора. I в строке выбора должно быть 2 разных цвета.

Пример код HTML ниже:

<select name="test"> 
    <option value = "red blue"> red blue </option> 
    <option style="color:blue;" value = "Row2"> Row2 </option> 
    <option style="color:green;" value = "Row3"> Row3 </option> 
</select> 

Например, для первого выбора варианта, я хочу, чтобы увидеть текст «красный» в красном цвете и «синий» в синем цвете в том же элементе списка.

Пожалуйста, может кто-то обеспечить рабочий пример с полным кодом, если это возможно

Большое спасибо

Answer 1

Это очень легко, вы можете просто назвать все опции к классу и добавить стиль CSS к этому классу, как вы как. Это должно иметь белый фон Это должно иметь красный фон Это должно иметь желтый фон Это должно иметь зеленый фон

<style type="text/css"> 
    .white {background:white;} 
    .red {color:red;} 
    .yellow {color:yellow;} 
    .green {color:green} 
</style> <!-- The styling you want can be given here --> 

Answer 2

На мой взгляд, и экспериментирование с вашим кодом, это не может быть возможно напрямую (failed code). Но если вам нужна работа вокруг/исправить, вы можете использовать небольшую внешнюю библиотеку, такую ​​как purecss (возьмите ее компонент меню), и просто напишите такой код:

Просто пример, чтобы дать представление.

HTML:

<div class="pure-menu pure-menu-horizontal"> 
    <ul class="pure-menu-list"> 
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover"> 
     <a href="#" id="menuLink1" class="pure-menu-link">select here</a> 
     <ul class="pure-menu-children"> 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link" value="red blue">red blue</a></li> 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link" value="blue">Row2</a></li> 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link" value="green">Row3</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

Jquery:

$(".pure-menu-children li").each(function(i, opt){ 
    var colors = $(opt).find(".pure-menu-link").attr("value"); // get the value 
    var txt = $(opt).find(".pure-menu-link").text(); // get the text 
    var txtarr = txt.trim().split(" "); // split them 
    var colorarr = colors.trim().split(" "); 
    $(opt).find(".pure-menu-link").html(""); // clear the content of the option 
    var len; 
    if(txtarr.length >= colorarr.length){ 
    len = txtarr.length - colorarr.length; 
    while(len--){ 
     colorarr.push("black"); 
    } 
    } 
    len = txtarr.length; 
    while(len--){ 
    $(opt).find(".pure-menu-link").append("&nbsp;<span style='color : "+colorarr.shift()+"'>"+txtarr.shift()+"</span>&nbsp;"); 
    } 
}); 

Рабочий код: https://jsfiddle.net/dkv6q2da/8/ (проверить внешние источники для компонента меню purecss)

Надеется, что это помогает.