Solved

Drop down Box with colors

Posted on 2011-03-11
3
303 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
[X]
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
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS Scroll Center with Static Side. Like EE does. 2 47
How to get chosen background-color on every line? 10 44
Search Box CSS Question 16 49
title attribute 5 33
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Find out what you should include to make the best professional email signature for your organization.
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…
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…

751 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