Solved

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

Posted on 2013-05-15
13
240 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
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.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

932 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

11 Experts available now in Live!

Get 1:1 Help Now