Solved

Drop down Box with colors

Posted on 2011-03-11
3
300 Views
Last Modified: 2012-05-11
Hi all,

Is it possible to give every option in a dropbox of HTML a different color?

Thx.

Errol
0
Comment
Question by:Errol Farro
3 Comments
 
LVL 16

Assisted Solution

by:HagayMandel
HagayMandel earned 60 total points
ID: 35109933
This will do the trick
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#A {
	background-color: #66FF00;
}
#B {
	background-color: #66CCFF;
}
#C {
	color: #FFFFFF;
	background-color: #FF0000;
}
-->
</style>
</head>

<body>
<select>
  <option value="A" id="A">Item A</option>
  <option value="B" id="B">Item B</option>
  <option value="C" id="C" >Item C</option>

</select>
</body>
</html>

Open in new window

0
 
LVL 39

Accepted Solution

by:
gdemaria earned 65 total points
ID: 35110363

You can also put the styles in line

and

If you're loading it from a query...


<select name="myField">
  <cfloop query="getData">
    <cfif getData.column is something>
        <option value="#getData.ID#" style="background-color:pink;color:black;">#getData.label#</option>
    <cfelseif getData.column is somethingElse>
        <option value="#getData.ID#" style="background-color:black;color:white;">#getData.label#</option>
    <cfelse>
        <option value="#getData.ID#" style="background-color:white;color:blue;">#getData.label#</option>
    </cfif>
</select>
0
 

Author Closing Comment

by:Errol Farro
ID: 35110712
Both solutions worked fine. Thanks guys.

Best regards,

Errol
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question