Change font colors in a drop down menu - Webmaster Forums - Webmaster forum for HTML, PHP, ASP, CSS and more

thejunior · 09-25-2005, 11:22 AM

I have a standard drop down menu.

select size="1" name="a1">
<option selected>.</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>

I would like the default color of the text in the dropdown to be red. However when the user clicks on a selection the font color would change to green for example in the dropdown menu. Can anyone help with the javascript to make this work? thanks

ultan · 09-25-2005, 12:09 PM

You may want to add this to your CSS style sheet or your <style>

Quote:

angie · 09-25-2005, 07:03 PM

As ~ultan said you can control with styles. Maybe some javascript too.

Code:

<script type="text/javascript">
function changeColors(sel) {
    if (sel.selectedIndex > 0) {
        sel.className = "green";
    }
    else {
        sel.className = "red";
    }
}
</script>

<style type="text/css">
.red option { color: #c00; }
.green option { color:#0c0; }
</style>

</head>

<body>

<form method="POST" action="do">
  <p>
  <select size="1" name="C1" class="red" onchange="changeColors(this);">
  <option selected>.</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  ......
.....
...

minusthebear420 · 01-02-2008, 05:49 PM

But, what if you just want to change one of the options. like say i want to underline or make bold one of the options in the list.
Then what should i do?
becasue im just like

when it comes to that.
i have been trying to figure it out for a few days now.
can anyone help?

vijay · 01-03-2008, 04:30 AM

Thanks for this useful definition.

minusthebear420 · 01-04-2008, 04:49 PM

im sorry but hm?

lingsharma · 02-04-2008, 02:37 AM

Hi,

This code will solve your problem. in this code the font color of the selected value will turn to red. N when the user scrolls the list again he/she will see the earlier selected value to be in red and when the user selects another value. the new value will turn to red font and the old value will return to black again.

<html>
<head>
<title>
trial
</title>

<script type="text/javascript">

function go(a)
{
c=document.getElementById("hidden").value;

if(c!="")
{
document.getElementById(c).className="black";
}

b=document.getElementById(a).value;

document.getElementById(b).className="red";
document.getElementById("hidden").value=b;
}

</script>

<style type="text/css">

.black {color: #000000;}
.red {color: #c00;}

</style>
</head>

<body>

<select id="blue" onchange="go(this.id)">
<option value="1" id="1">1</option>
<option value="2" id="2">2</option>
<option value="3" id="3">3</option>
<option value="4" id="4">4</option>
<option value="5" id="5">5</option>
<option value="6" id="6">6</option>
</select>

<input type="hidden" id="hidden" value="">

</body>
</html>

minusthebear420 · 02-07-2008, 08:38 PM

This would be extremely helpful if I had wanted to change the font color.

But I wish to underline or make bold certain options in the drop down menu.
Any chance you know about that?

lingsharma · 02-10-2008, 07:53 PM

can u pls explain what exactly do u want the code to do. pls be precise, so that i can help you, 10q

minusthebear420 · 02-10-2008, 08:07 PM

I would want to underline, italicize, and/or make bold an option in the drop down menu.

<select>
<option selected>groceries
<option>milk
<option>cheese
<option>bread
<option>cookies
</select>

Say I wanted bread to be underlined and italicized and bold. Or I just wanted it bold. How would I do something like that.