Solved

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

Posted on 2013-05-15
13
232 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
 
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
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

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses how to create an extensible mechanism for linked drop downs.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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…

762 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

23 Experts available now in Live!

Get 1:1 Help Now