Solved

Drop down Box with colors

Posted on 2011-03-11
3
299 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
Comment Utility
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
Comment Utility

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
Comment Utility
Both solutions worked fine. Thanks guys.

Best regards,

Errol
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I spent nearly three days trying to figure out how incorporate OAuth in Coldfusion for the Eventful API. Hopefully, this article will allow Coldfusion Programmers to buzz through the API when they need to. Basically, what this script does is authori…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now