Color part of text in select-option

I need to be able to change the color of part of the text in a specific row in a drop down box in HTML.

Take a look at the code sample below.
Obviously the font tag here has no effect.
I know how to change the color of a whole row, using css and <option class=red>, but how can I do this with part of the row?
Would also be useful if I could set the background for that portion of text.

<option>item2.1<font color=red>item2.2</font>item2.3</option>

Open in new window

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

As far as I am aware this cannot be achieved without the creation of a custom drop down control.

I have whipped a simple one up for you to try, you will need to download the PrototypeJS script (which is completely free) from:

Please give the source below a try and let me know how you get on. You will probably want to create some sort of an arrow graphic for the drop down button (for speed I've just used a '+' character).

You can access the selected item simply by calling:


If you wanted you can also force the control to show or hide with:;

// You can have as many instances of these controls as you like, but each one must be initialized and destroyed from the "load" and "unload" event handlers.
		<title>Demo Page</title>
		<script type="text/javascript" src="prototype.js"></script>
		<style type="text/css">
			.dropdown {
				cursor: default;
			.dropdown .arrow {
				float: right;
				width: 20px;
				height: 24px;
				background-color: gray;
			.dropdown .label {
				border: solid 1px gray;
				padding: 1px 1px 1px 3px;
				margin-right: 20px;
			.dropdown .popup {
				border: solid 1px gray;
				padding: 1px;
				display: none;
			.dropdown .popup .option {
				padding: 1px;
				background-color: transparent;
				color: black;
			.dropdown .popup .option:hover {
				background-color: #0034A2;
				color: white;
		<script type="text/javascript">
			// This is the main drop down control logic.
			// I recommend that you put this class into its own .js file.
			var DropDown = Class.create({
				initialize: function(id) {
					this.elementId = id;
					this.shown = false;
					this.selectedIndex = 0;

					// Attach event handlers.
					var el = $(id);
					var event_popup = this.toggle.bind(this);'.arrow')[0].observe('mousedown', event_popup);'.label')[0].observe('mousedown', event_popup);
					var event_select = this.selectHandler.bind(this);'.option').each(function(optionEl) {
						optionEl.observe('mousedown', event_select);
					}, this);
				destroy: function() {'.arrow')[0].stopObserving();'.label')[0].stopObserving();'.option').each(function(optionEl) {
					}, this);

				show: function() {
					this.shown = true;
					$(this.elementId).select('.popup')[0].style.display = 'block';
				hide: function() {
					this.shown = false;
					$(this.elementId).select('.popup')[0].style.display = 'none';
				toggle: function() {
					if (this.shown)
				select: function(index) {
					if (this.selectedIndex != index) {
						this.selectedIndex = index;
						var labelEl = $(this.elementId).select('.label')[0];
						labelEl.innerHTML = this.getSelectedHtml();
				getSelectedHtml: function() {
					var selected = $(this.elementId).select('.option')[this.selectedIndex];
					return selected.innerHTML;
				selectHandler: function(evt) {
					$(this.elementId).select('.option').each(function(optionEl, index) {
						if (optionEl == evt.element()) {;
					}, this);

			// The following should be left within your html page itself.

			// This is a reference to your drop down control.
			var myDropDown;

			Event.observe(window, 'load', function() {
				// Initialize here.
				myDropDown = new DropDown('dropDown1');
			Event.observe(window, 'unload', function() {
				// Destroy here.
		<h1>Demo Page</h1>
		<!-- The class names here are important. -->
		<div id="dropDown1" class="dropdown">
			<div class="arrow">+</div>
			<div class="label">item1</div>
			<div class="popup">
				<div class="option">item1</div>
				<div class="option">item2.1<span style="color:red;">item2.2</span>item2.3</div>
				<div class="option">item3</div>

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Hi Amrox,
Unfortunately that's not possible using plain html and css
However you can use custom drop down controls like mootools elselect , which I have used before and it practically lets you get all your values from a real <select> on your page which is hidden by the script and custom divs show your actual drop down, also selecting values in your divs does update the hidden <select> element so you can still use the values, events, etc..

demo can be seen here

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.