[Webinar] Streamline your web hosting managementRegister Today


Color part of text in select-option

Posted on 2010-03-29
Medium Priority
Last Modified: 2012-05-09
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

Question by:amrox
LVL 13

Accepted Solution

numberkruncher earned 1000 total points
ID: 28992723
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
		<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);
					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('.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

LVL 22

Assisted Solution

remorina earned 1000 total points
ID: 28993252
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/


Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question