Computing.Net > Forums > Web Development > Colored SELECT elements

Computer Problems? Computing.Net has over 1,000,000 posts about all things technology related! Over 90% answered within 24 hours! Click here to start participating now! Also, be sure to check out the New User Guide.

Colored SELECT elements

Reply to Message Icon

Name: rohnds
Date: February 27, 2005 at 00:53:16 Pacific
OS: XP
CPU/Ram: 256
Comment:

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



Sponsored Link
Ads by Google

Response Number 1
Name: fambi
Date: February 27, 2005 at 11:06:28 Pacific
Reply:

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 .


0

Response Number 2
Name: rohnds
Date: February 27, 2005 at 14:40:39 Pacific
Reply:

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

Rohn


0

Response Number 3
Name: Dr. Nick
Date: February 27, 2005 at 15:40:56 Pacific
Reply:

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.


0

Response Number 4
Name: rohnds
Date: February 28, 2005 at 02:03:18 Pacific
Reply:

Perfect, exactly what I want to accomplish.
Thanks,
Rohn


0

Sponsored Link
Ads by Google
Reply to Message Icon

Related Posts

See More


table padding? Strange mouse over on lin...



Post Locked

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


Go to Web Development Forum Home


Sponsored links

Ads by Google


Results for: Colored SELECT elements

Javascript form www.computing.net/answers/webdevel/javascript-form/2986.html

script works in IE not Netscape www.computing.net/answers/webdevel/script-works-in-ie-not-netscape/1088.html

Font Changing Coding in Javascript www.computing.net/answers/webdevel/font-changing-coding-in-javascript/1778.html