HTML Select the Option tag with differemt colors in the same line or the same option

Question

There is a new requirement, according to which we need to have a different color for one element of the selection list. I should have 2 different colors in the selection bar.

Sample html code below:

<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>

For example, for the first selection option, I want to see red text in red and blue in the same list item.

Please can someone provide a working example with full code if possible

Many thanks

Answer 1

, ( ). /, , ​​ 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)

, .

Answer 2

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 -->