Tom's Guide | Tom's Hardware | Tom's Games
![]() |
![]() |
![]() |
I have build a dropdown combo box using <SELECT> tag,
----------------- coded -------------
<SELECT NAME="sportName" onChange=getSport>
<OPTION>Select a Sport</OPTION>
<OPTION value=1>Beach Volleyball</OPTION>
<OPTION value=2>Basketball</OPTION>
<OPTION value=3>Pool</OPTION>
<OPTION value=4>Tennis</OPTION>
<OPTION value=5>Soccer</OPTION>
<OPTION value=6> ... go to home page</OPTION>
</SELECT>
---------- code ----------------Is there any way to define tags to each of the elements in the <SELECT>. When I define tags to each of the elements it does not work,
i.e.
<OPTION value=6> ... go to home page</OPTION>Thanks,
Rohn

THe best solution is to use a style sheet:
select
{
background:red;
color:blue;
}
<select>
<option>Value</option>
<option>Value</option>
<option>Value</option>
</select>This will, however, affect all of your selects on every page.
If you want a particular one then give it an id, like this
select#yourname
{
background:red;
color:blue;
}
<select id="yourname">
<option>Value</option>
<option>Value</option>
<option>Value</option>
</select>If you're interested in SMS, visit my wife's site .

Sorry if I wasn't a little more clear. What I want is different elements in the SELECT menu to have different colors.
Rohn

Yeah, that's pretty easy.
Just add a STYLE attribute to each OPTION like this:
<option style="background-color: #ff0000">Option</option>
That would give it a red background.You can also use style sheets and classes to make it a little more organized:
<html>
<head>
<style type="text/css">option.red {
background-color: #ff0000;
}
.blue {
background-color: #0000ff;
}
.green {
background-color: #00ff00;
}</style>
</head><body>
<form>
<select>
<option class="red">This is red</option>
<option class="blue">This is blue</option>
<option class="green">This is green</option>
</select>
</form></body>
</html>
That way to add a different color, you just create a new class for the OPTION element. It also means less text for each element.

![]() |
table padding?
|
Strange mouse over on lin...
|

This post is quite old and has been locked from receiving new replies. Please create a new posting instead.
| Ads by Google |