How to color a specific word in text of drop-down menu?

vbcoach · July 31, 2011

How to color individual words of text inside drop-down menu?

A question if you don't mind about coloring text in PHP output - this time inside of a drop-down menu. Do you know if it is possible to color code a single word or words of text in a drop-down menu?

For example I have a list of shirt colors and sizes and would like to make the color of the t-shirt text be that color. For example Women's BLUE large - I would like the word "Blue" be in the color Blue if possible.

Do you know if this is possible? If so, do you have an example of code that would work? I find codes that change the entire drop-down menu, but not individual words.

Thanks in advance.

voip03 · July 31, 2011

try jQuery

wildteen88 · July 31, 2011

try jQuery

Why?

You'd use CSS for this. You wont be able to color certain parts of text within the <option></option> tags. Example CSS

<select>
    <option value="large blue" style="color: blue">Large Blue T-shirt</option>
    <option value="large blue" style="color: Green">Small Green T-shirt</option>
</select>

I'll move this to CSS help

vbcoach · July 31, 2011

WAIT!

Please read my post. Don't move!

I asked about color coding a specific word INSIDE of a menu, not the entire menu. I already know how to do that, and I wrote in my initial posting!

wildteen88 · July 31, 2011

WAIT!

Please read my post. Don't move!

I asked about color coding a specific word INSIDE of a menu, not the entire menu. I already know how to do that, and I wrote in my initial posting!

You can't colour individual words within <option></option> tags,

vbcoach · July 31, 2011

JQuery? Sounds interesting. Thanks for the tip. I will try that.

teynon · July 31, 2011

I have spent the better part of an hour making a dynamic drop down box that is entirely customizable for you. Here is the code. I highly suggest you look at the code and see how it works before posting a question.

<html>
<head>
<style>
.select {
border: 1px solid #000000;
width: 200px;
}
.select div {
display: none;
}
.selectH {
border: 1px solid #555555;
width: 200px;
}
.selectH div {
display: block;
}
.select .show {
display: block;
}
</style>
<script>
function selectBox(node) {
var a = 0;
var divs = new Array();

if (node.className == 'select') {
	node.className = 'selectH';
}
else {
	node.className = 'select';
}
for (i in node.childNodes) {
	//alert(node.childNodes(i).nodeName);
	if (node.childNodes(i) != undefined) {
		if (node.childNodes(i).nodeName == "DIV") {
			divs[a]=i;
			a++;
			html=node.childNodes(i).innerHTML;
			//alert(html);
			node.childNodes(i).setAttribute('onclick', 'selectDrop("'+node.id+'", "'+html+'")');
			//node.childNodes(i).onclick = function() { alert(html); };
		}
	}
}
}
function selectDrop(objId, selectName) {
// Create Form Element if it doesnt exist
if (document.getElementById(objId+'input') == null) {
	document.getElementById(objId).innerHTML=document.getElementById(objId).innerHTML+"<input type='hidden' id='"+objId+"input' name='"+objId+"' value='"+selectName+"'>";
}
else {
	document.getElementById(objId+'input').value = selectName;
}
}
</script>
</head>
<body>

<div class="select" id="product" onClick="selectBox(this);">Choose Product
<div>Hats</div>
<div>Shirts</div>
<div>Pants</div>
</div>

</body>
</html>

You can see an example of this at http://www.thomaseynon.com/dropdown.html

For everyone else: Can you test compatibility?

UPDATE:

This mimics a select statement a little better:

<html>
<head>
<style>
.select {
border: 1px solid #000000;
width: 200px;
}
.select div {
display: none;
}
.selectH {
border: 1px solid #555555;
width: 200px;
}
.selectH div {
display: block;
}
.select .show {
display: block;
}
</style>
<script>
function selectBox(node) {
var a = 0;
var divs = new Array();

if (node.className == 'select') {
	node.className = 'selectH';
}
else {
	node.className = 'select';
}
for (i in node.childNodes) {
	//alert(node.childNodes(i).nodeName);
	if (node.childNodes(i) != undefined) {
		if (node.childNodes(i).nodeName == "DIV") {
			divs[a]=i;
			a++;
			html=node.childNodes(i).innerHTML;
			//alert(html);
			node.childNodes(i).setAttribute('onclick', 'selectDrop("'+node.id+'", "'+html+'")');
			//node.childNodes(i).onclick = function() { alert(html); };
		}
	}
}
}
function selectDrop(objId, selectName) {
// Create Form Element if it doesnt exist
if (document.getElementById(objId+'input') == null) {
	document.getElementById(objId).innerHTML=document.getElementById(objId).innerHTML+"<input type='hidden' id='"+objId+"input' name='"+objId+"' value='"+selectName+"'>";
}
else {
	document.getElementById(objId+'input').value = selectName;
}
var parent = document.getElementById(objId);
for (i in parent.childNodes) {
	if (parent.childNodes(i) != undefined) {
		if (parent.childNodes(i).nodeName == "SPAN") {
			parent.childNodes(i).innerHTML = selectName;
		}
	}
}
}
</script>
</head>
<body>

<div class="select" id="product" onClick="selectBox(this);"><span>Choose Product</span>
<div>Hats</div>
<div>Shirts</div>
<div>Pants</div>
</div>

</body>
</html>

teynon · July 31, 2011

I've been obsessing over making this more usable and have improved it further. The example has been updated as well.

Example: http://www.thomaseynon.com/dropdown.html

You can download this dropdown example here: http://www.thomaseynon.com/dropdown.zip

teynon · July 31, 2011

Sigh... Sorry for the reposts... :/ I've fixed the above code to work in IE, Firefox, and Chrome.

All files have been updated:

Example: http://www.thomaseynon.com/dropdown.html

Download: http://www.thomaseynon.com/dropdown.zip

To create a select box using this code all you have to do is this:


<div class="select" id="MyInputName">
<div>Hats</div>
<div>Shirts</div>
<div>Pants</div>
</div>

Sign In

How to color a specific word in text of drop-down menu?

Recommended Posts

vbcoach

Link to comment

Share on other sites

voip03

Link to comment

Share on other sites

wildteen88

Link to comment

Share on other sites

vbcoach

Link to comment

Share on other sites

wildteen88

Link to comment

Share on other sites

vbcoach

Link to comment

Share on other sites

teynon

Link to comment

Share on other sites

teynon

Link to comment

Share on other sites

teynon

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information