I have a SELECT list with several OPTION elements. Here is my naive approach to styling part of the option text:
In some cases I could do that by jQuery. Look here: http://jsfiddle.net/rangine/wegx00La/4/
I used a select box for choosing a glyph icon in bootstrap form. but unfortunately this worked only in Firefox.(I don't test it on all browser. in Chrome not works and in IE! I threw it away.
Html:
This code Only works in Firefox.
jquery:
(function($) {
$(document).ready(function() {
$('#myselect option').each(function() {
$(this).html(' ' + $(this).text());
})
});
$('.preview').html(' ');
$('#myselect').change(function() {
$('.preview').html(' ');
});
})(jQuery);
Some CSS:
#myselect {
margin: 40px;
height: 30px;
font-size: 14pt;
}
option.red {
color: red;
}
option.green {
color: green;
}
.preview {
font-size: 20pt;
}