meomike2000 Posted April 20, 2009 Share Posted April 20, 2009 i want to use a select input for users to choose a color,,, but, i want to be able to do more than just write in the name of the color i would like to be able to actual put a color sample instead of the word or both.... any ideas on how to do somthing like that... i tried this, <option style="{background-color:#000000}" value="0" <?if ($bgcolor=="0") {echo 'selected="selected" '; } ?> >black</option> <option style="{background-color:#0000cd}" value="1" <?if ($bgcolor=="1") {echo 'selected="selected"'; } ?> >blue</option> and the word and color display but kinda weird, if i put the mouse over the color for selection that color goes away and the other color selection shows color.. if mouse over the black the blue shows blue,, if mouse over the blue,,, then shows the color black, how can i get it to show the color all the time, or is there a better way to allow color selection from color samples not words.. thanks mike..... Quote Link to comment Share on other sites More sharing options...
Axeia Posted April 21, 2009 Share Posted April 21, 2009 Styling <option>'s is only supported in Firefox. You need to write your own select using divs (or some other element) and javascript if you want to style it. Quote Link to comment Share on other sites More sharing options...
Axeia Posted April 21, 2009 Share Posted April 21, 2009 http://v2.easy-designs.net/articles/replaceSelect/ Very detailed tutorial on to do what I posted above. If you're looking forward to learning something new I'd recommend following it. Keep in mind that it reduces accessibility. For example the arrow up/down keys don't change the value when it's selected unlike the real element, I'm sure there are also existing solutions for this presents in libraries like jquery/yui/mootools/mojo Quote Link to comment Share on other sites More sharing options...
meomike2000 Posted April 22, 2009 Author Share Posted April 22, 2009 well it is working in ie for me on vista...... as well as firefox on ubuntu..... Quote Link to comment Share on other sites More sharing options...
Axeia Posted April 22, 2009 Share Posted April 22, 2009 It did not for me when I tried adding background images to the background of a options, something like <select> <option style='background-image: url( netherlands.png );'>Dutch</option> <option style='background-image: url( germany.png );'>German</option> </select> Though I can't remember when it was, so it might have been pre-ie7. If every visitor counts I'd double check in ie6/opera and one of the webkit based browsers such as konqueror, safari and/or chrome Quote Link to comment Share on other sites More sharing options...
meomike2000 Posted April 23, 2009 Author Share Posted April 23, 2009 not sure if images would work..... thanks for the advice though....... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.