?
Solved

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

Posted on 2013-05-15
13
Medium Priority
?
271 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
[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
  • 7
  • 5
13 Comments
 
LVL 6

Accepted Solution

by:
APoPhySpt earned 1000 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 1000 total points
ID: 39168362
You mean something like this
http://jsfiddle.net/uhSu8/2/
0
 
LVL 53

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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
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 53

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 53

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 53

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 53

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 53

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 53

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

770 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