Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 275
  • Last Modified:

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

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
Scott Fell,  EE MVE
Asked:
Scott Fell,  EE MVE
  • 7
  • 5
2 Solutions
 
APoPhySptCommented:
<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
 
GaryCommented:
You mean something like this
http://jsfiddle.net/uhSu8/2/
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
GaryCommented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
Chrome Version 26.0.1410.65 gives me nothing for either solution.
0
 
GaryCommented:
Version 26.0.1410.64 m
I see the option values all coloured.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
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
 
GaryCommented:
Must be a quirk on the Mac version.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
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
 
GaryCommented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorAuthor Commented:
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

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now