[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

background color in select list options

Posted on 2014-08-20
3
Medium Priority
?
310 Views
Last Modified: 2014-08-21
I'm trying to display color options in a select list. Just the color. I am using this:

<select name="color">
            <option value="#000000">Black - <img src='images/spacer.gif' width='50' height='10'></option>
                              <option value="#FF0000" selected><span style="background-color: #FF0000;"><img src="images/spacer.gif" width="50" height="10"></span></option>
                              <option value="#0000FF" ><span style="background-color: #0000FF;"><img src="images/spacer.gif" width="50" height="10"></span></option>
                              <option value="#00FF00" ><span style="background-color: #00FF00;"><img src="images/spacer.gif" width="50" height="10"></span></option>
                              <option value="#800080" ><span style="background-color: #800080;"><img src="images/spacer.gif" width="50" height="10"></span></option>
                              <option value="#FFFF00" ><span style="background-color: #FFFF00;"><img src="images/spacer.gif" width="50" height="10"></span></option>
                              <option value="#00FFFF" ><span style="background-color: #00FFFF;"><img src="images/spacer.gif" width="50" height="10"></span></option>
                              <option value="#00FFFF" ><span style="background-color: #00FFFF;"><img src="images/spacer.gif" width="50" height="10"></span></option>
                              <option value="#FF8C00" ><span style="background-color: #FF8C00;"><img src="images/spacer.gif" width="50" height="10"></span></option>
                              <option value="#FF1493" ><span style="background-color: #FF1493;"><img src="images/spacer.gif" width="50" height="10"></span></option>
                              <option value="#FFD700" ><span style="background-color: #FFD700;"><img src="images/spacer.gif" width="50" height="10"></span></option>
                              <option value="#A0522D" ><span style="background-color: #A0522D;"><img src="images/spacer.gif" width="50" height="10"></span></option>
                              <option value="#000080" ><span style="background-color: #000080;"><img src="images/spacer.gif" width="50" height="10"></span></option>
            </select>

spacer.gif is a one pixel x one pixel transparent gif.

The first option (Black) is inconsistent, please ignore that.

All the colors show as white.

How can I make this work? Or is there a way? Of course I could use radionbuttons, what a pain & takes more space.

Thanks
0
Comment
Question by:Richard Korts
  • 2
3 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40275220
You cannot have an HTML tag inside an OPTION tag
Just set the color on the OPTION itself and get rid of the SPAN and IMAGE and use a width in place of the image
0
 

Author Comment

by:Richard Korts
ID: 40275231
You mean I can use background-color as a style on the option?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40275232
Yes
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

825 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