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

Joseph and his multi colored dream select box - all hacks welcome

Posted on 2013-05-15
13
257 Views
Last Modified: 2013-05-15
I understand this is not natural, but looking for ideas to make this
<select name="pets">
<option value="1">dogs</option> 
<option value="1">cats</option> 
<option value="1">goldfish</option> 
<option value="1">snakes</option> 
</select>

Open in new window

look like this image where each item can have it's own color - both while being selected and after selected it takes on the chosen color.
Color Select
I'll except any un natural hack as long as it works.  If it has to start out as an unordered list and use javascript/jquery is used that is fine.  I just need to submit this with the rest of the form fields and capture the value.  

This will be used with chrome and firefox for the desktop and possibly ipad but I don't really care about the ipad.

The best I have come up with so far is css that colors the background and text only when the select is not active and everything is the same color.

select {
    background: #2CD8E3;
    color: red;
    font-weight: bold;
}

Open in new window

0
Comment
Question by:Scott Fell,  EE MVE
  • 7
  • 5
13 Comments
 
LVL 6

Accepted Solution

by:
APoPhySpt earned 250 total points
ID: 39168327
<style tyle=text/css>
option.red {background-color: #cc0000; font-weight: bold; font-size: 12px;}
option.pink {background-color: #ffcccc;}
</style>

Open in new window


and html:
<option class="red" value= "../getting_started/">Getting Started </option>
<option class="pink" value= "../getting_started/html_intro1.htm">- Intro to HTML
 </option>

Open in new window

0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 250 total points
ID: 39168362
You mean something like this
http://jsfiddle.net/uhSu8/2/
0
 
LVL 52

Author Comment

by:Scott Fell, EE MVE
ID: 39168584
Thanks!  I have already tried what you both have.   I have been struggling in chrome and just tried both of your solutions in firefox and they work. Now Just need it to work on chrome.
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 58

Expert Comment

by:Gary
ID: 39168601
Works fine for me in Chrome.
Are you also wanting the dropdown to change to the background of the option selected.
I'm having a hard time getting it to work - it always gives me a light blue colour.
0
 
LVL 52

Author Comment

by:Scott Fell, EE MVE
ID: 39168603
The final use case here will be using serverside scripting to set the color for each option.  This could either be from calling css class or inline - does not matter.

I just noticed my sample html had all the same value and of course that will not be the case.
0
 
LVL 52

Author Comment

by:Scott Fell, EE MVE
ID: 39168614
Chrome Version 26.0.1410.65 gives me nothing for either solution.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39168630
Version 26.0.1410.64 m
I see the option values all coloured.
0
 
LVL 52

Author Comment

by:Scott Fell, EE MVE
ID: 39168631
I need it to be like the sample when you click the drop down and it shows you the options, each are a different color or at least determined by css. Then once selected stays that color.  I have been able to get the color once selected but when showing all options when you click, it goes back to the white white background with black text.
0
 
LVL 52

Author Comment

by:Scott Fell, EE MVE
ID: 39168650
The css below works only when I am not selecting.  But once I click to see all the options it goes back to white background with black text.


select {
    background: #2CD8E3;
    color: red;
    font-weight: bold;
}

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39168655
Must be a quirk on the Mac version.
0
 
LVL 52

Author Comment

by:Scott Fell, EE MVE
ID: 39168670
Probably. I think it needs to be a more complex ul/li jquery thing that I don't want to tackle. I am just going to close this out and move on.

Thanks!
0
 
LVL 58

Expert Comment

by:Gary
ID: 39168671
Maybe this bug is still present
http://code.google.com/p/chromium/issues/detail?id=50374

Other option is to use one of the jquery plugins for styling a select box.
0
 
LVL 52

Author Comment

by:Scott Fell, EE MVE
ID: 39168689
I didn't even think to look at pc vs mac for chrome.  This is for pc people so I will use it as you have it above.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 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