1

I have a problem. I have a drop down of colors.

For example

<select>
    <option>Red</option>
    <option>Blue</option>
</select>

I want to add a colored box before the name of the color.

I can't find a solution for this.

Thanks for the help in advance.

comebal
  • 946
  • 3
  • 14
  • 30

2 Answers2

2

I haven't found a way to easily add color boxes or images directly to Select boxes, but it's relatively simple to do this by replacing Select elements with Definition List (DL) elements. There's an excellent tutorial showing you how to do this here

I created a jsfiddle with color boxes http://jsfiddle.net/NjaEL/ (just change the path for the arrow icon so that an arrow is displayed in the container).

The basic code is:

HTML

<dl class="dropdown">
<dt ><a href="#"><span>Color</span></a></dt>
<dd>
    <ul>
    <li><a href="#"><span class="color" style="background-color:Red"></span>Red<span class="value">Red</span></a></li>
     ...       
     </ul>
</dd>
</dl>

CSS

.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; } .dropdown dd { position:relative; } .dropdown dt a {background:#ffffff url(images/arrow1.png) no-repeat scroll 97.5% center ; display:block; padding-right:20px;width:70px; border: 1px solid #d3d3d3;} .dropdown dt a:hover { color:#212121; border: 1px solid #999999;} .dropdown a, .dropdown a:visited { color:#555555; text-decoration:none; outline:none;} .dropdown a:hover { color:#212121;} .dropdown dd ul { background:#ffffff none repeat scroll 0 0; border:1px solid #d3d3d3; color:#555555; display:none; left:0px; padding:5px 0px; position:absolute; top:0px; width:90px; list-style:none;} .dropdown dd ul li a { padding:5px; display:block;} .dropdown span.value { display:none;} .dropdown .color { border: 1px solid silver; vertical-align:middle; margin-right:5px; min-width: 10px;}

Javascript

$(document).ready(function() {
$(".dropdown dt a").click(function() {
    $(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
    var text = $(this).html();
    $(".dropdown dt a span").html(text);
    $(".dropdown dd ul").hide();
    $("#result").html("Selected value is: " + getSelectedValue("sample"));
});
function getSelectedValue(id) {
    return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});
});
Chaya Cooper
  • 2,566
  • 2
  • 38
  • 67
0

With CSS only it wouldn't work in all browsers - read here: https://stackoverflow.com/a/2966006/1361042

and your colored box should be an image.

Community
  • 1
  • 1
Dan Barzilay
  • 4,974
  • 5
  • 27
  • 39
  • Would you mind clarifying how to do it using images? I know how to do it with menus (thanks to http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx :-) ), but it's a bit more challenging with select boxes than I would have expected – Chaya Cooper Dec 24 '12 at 00:32
  • @ChayaCooper You can use ur menu design and JS code and add an hidden select elemnt and when the user clicks an item on the menu (which will act as a selct box) the JS will change the hidden select selected item. – Dan Barzilay Dec 24 '12 at 11:27
  • I'm sorry for being unclear :-) I was wondering how to do it using select boxes instead of menu items (which can be a bit more complicated to work with) – Chaya Cooper Dec 24 '12 at 15:24
  • @ChayaCooper You don't need to get in that select boxes mess just use those menu and u'll be good to go ;) – Dan Barzilay Dec 25 '12 at 08:07
  • Thanks :-) I've modified jankoatwarpspeed's post to use background colors instead of images (although I'm still trying to fix the script so that the colorbox formatting is applied to the DT container), and I'll share my code below to help @comebal know how to do it :-) – Chaya Cooper Dec 25 '12 at 21:01