I have been asked to have multiple text colours for a certain dropdown option something like this:
<select>
<option>Test <span style="color:red;">New</span></option>
</select>
Now obviously this will not work for HTML select, but will I be able to do something like this with react-select. If not can someone suggest an alternative?
UPDATE
I also tried with select2, didn't work, is what I am trying to do not possible?
It's possible with select2, here's the idea on how to do this with both templateResult & templateSelection
var data = [{
id: 0,
text: '<span>Test <span style="color:red;">New</span></span>'
}];
$("select").select2({
data: data,
templateResult: function(d) {
return $(d.text);
},
templateSelection: function(d) {
return $(d.text);
},
}).select2-dropdown {
margin-top: 10px;
margin-left: 8px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<select></select>Fiddle : https://jsfiddle.net/3z2txkba/