Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Drop down Box with colors

Posted on 2011-03-11
3
301 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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

789 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