Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Drop down Box with colors

Posted on 2011-03-11
3
Medium Priority
?
308 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 240 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 260 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

Implementing Azure Infrastructure Exam 70-533

This course is designed to familiarize and instruct students in the content that is covered by Microsoft Exam 70-533, Implementing Microsoft Azure Solutions. It focuses on all the November 2016 objective domain topics.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

730 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