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.

Thx.

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

Open in new window

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:

http://prototypejs.org/download

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:

myDropDown.selectedIndex

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

myDropDown.show();
myDropDown.hide();

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<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;
			}
		</style>
		<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);
					el.select('.arrow')[0].observe('mousedown', event_popup);
					el.select('.label')[0].observe('mousedown', event_popup);
					var event_select = this.selectHandler.bind(this);
					el.select('.option').each(function(optionEl) {
						optionEl.observe('mousedown', event_select);
					}, this);
				},
				destroy: function() {
					el.select('.arrow')[0].stopObserving();
					el.select('.label')[0].stopObserving();
					el.select('.option').each(function(optionEl) {
						optionEl.stopObserving();
					}, 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)
						this.hide();
					else
						this.show();
				},
				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.select(index);
							this.hide();
							return;
						}
					}, 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.
				myDropDown.destroy();
			});
		</script>
	</head>
	<body>
		<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>
			</div>
		</div>
	</body>
</html>

Open in new window

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.

LVL 13

numberkruncherCommented: 2010-03-29

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

LVL 22

remorinaCommented: 2010-03-29

Hi Amrox,
Unfortunately that's not possible using plain html and css
However you can use custom drop down controls like mootools elselect http://www.cult-f.net/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 http://www.cult-f.net/samples/elselect/

Color part of text in select-option

Who is Participating?