Apply styles to select text in form 1

[morecowbell]

Hi, I'm new here! Our creative dept is asking if I can make a dropdown select list with different colors and strikethrough text if the item is on sale.

For example, can I have this in a dropdown list:

Watermelon Serving Bowl $24.95 now $19.99

Can this be done? TIA

 

[WartookMan]

It isn't possible in a SELECT box (dropdown list), however, you could do it with a SELECT box and a SPAN as follows:

<style type="text/css">
body {
	font-family: verdana;
	font-size: 80%; 
}
.old {
	color: #000000;
	font-size: 80%; 
	text-decoration: line-through;
}
.new {
	color: #FF0000;
	font-weight: bold;
}
</style>
<script type="text/javascript">
var specials = new Array("Was:<span class='old'>$24.95</span>, Now:<span class='new'>$19.99</span>", "Was:<span class='old'>$29.99</span>, Now:<span class='new'>$24.95</span>");
function Special(obj) {
	var price = document.all("price");
	if(obj.selectedIndex > 0) {
		price.innerHTML = specials[obj.selectedIndex - 1];
	}
}
</script>

<form>
<select onchange="Special(this);">
<option value="0">-Please Select-</option>
<option value="1">Watermelon Serving Bowl</option>
<option value="2">Chinese Cooking Wok</option>
</select>
<span id="price"></span>
</form>

Obviously, you'll need to generate the array of "old" and "new" values using some server side code, but you'll get the idea. You could even split out the "old" and "new" prices into two arrays, and build up the HTML yourself within the IF statement (of the Specials function).

Hope this helps.

Pete.


Web Developer & Aptrix / IBM Lotus Workplace Web Content Management (LWWCM) Specialist
w:

http://www.lwwcm.com/

e: Pete.Raleigh(at)lclimited.co.uk

 

[morecowbell]

Thanks for the great solution! Unfortunately, there isn't room for copy next to the dropdown and the artist wanted all the text to appear inside it. Good thing she's flexible and is ok with changing things around

 

[BillyRayPreachersSon]

Incidentally, you can have different coloured backgrounds for each option in most browsers, using CSS, I believe.

Hope this helps,
Dan

 

[glenmac]

Thanks Pete a Star for you.

Glen

http://lantzvillecomputers.ca