I need a color picker in the form of a dropdown list. I want to create a regular list of color names with a color swatch next to it.
I have been looking around the web for examples, but all I can find is examples setting the background color of the list item, and that looks awful. I've tried placing a div in the list item, but that isn't working either.
I KNOW I have seen this done before. Can someone hook me up?
MikeMartinez
Member
41 Points
25 Posts
Color swatches in a dropdown list?
May 18, 2011 04:11 PM|LINK
I need a color picker in the form of a dropdown list. I want to create a regular list of color names with a color swatch next to it.
I have been looking around the web for examples, but all I can find is examples setting the background color of the list item, and that looks awful. I've tried placing a div in the list item, but that isn't working either.
I KNOW I have seen this done before. Can someone hook me up?
Thanks,
Mike
peroija
Member
432 Points
104 Posts
Re: Color swatches in a dropdown list?
May 18, 2011 04:39 PM|LINK
have you tried including an image before the color in the list item?
<li> [image] Red</li>
or
<li> <div with css> Red </li>?
I will try a div example in a minute for you.
EDIT: Was totally thinking of <ul> and <ol> and not dropdownlist, sorry.
MikeMartinez
Member
41 Points
25 Posts
Re: Color swatches in a dropdown list?
May 18, 2011 04:42 PM|LINK
I have not tried the image.... that would mean I need to make 16 images (assuming she likes those colors!) .
I'm using the combobox control. Here's a bit of what I have so far. ( not working )
<asp:DropDownList ID="ddlColor" runat="server" AppendDataBoundItems="false" Autopostback="false" EnableViewState="true"> <asp:ListItem Value="Blue"> Blue</asp:ListItem> <asp:ListItem Value="Aqua"><div style="height:10px; width:10px; background-color:Aqua" /> Aqua</asp:ListItem> <asp:ListItem Value="Grey"><div style="height:10px; width:10px; background-color:Grey" /> Grey</asp:ListItem> <asp:ListItem Value="Navy"><div style="height:10px; width:10px; background-color:Navy" /> Navy</asp:ListItem> <asp:ListItem Value="Silver">Silver</asp:ListItem> <asp:ListItem Value="Black">Black</asp:ListItem> <asp:ListItem Value="Green">Green</asp:ListItem> <asp:ListItem Value="Olive">Olive</asp:ListItem> <asp:ListItem Value="Teal">Teal</asp:ListItem> <asp:ListItem Value="Lime">Lime</asp:ListItem> <asp:ListItem Value="Purple">Purple</asp:ListItem> <asp:ListItem Value="White">White</asp:ListItem> <asp:ListItem Value="Fuchsia">Fuchsia</asp:ListItem> <asp:ListItem Value="Maroon">Maroon</asp:ListItem> <asp:ListItem Value="Red">Red</asp:ListItem> <asp:ListItem Value="Yellow">Yellow</asp:ListItem> </asp:DropDownList>paindaasp
Star
12252 Points
2070 Posts
Re: Color swatches in a dropdown list?
May 18, 2011 04:43 PM|LINK
How about the Ajax Color Picker:
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ColorPicker/ColorPicker.aspx
MikeMartinez
Member
41 Points
25 Posts
Re: Color swatches in a dropdown list?
May 18, 2011 04:45 PM|LINK
I think that will do just fine. Thank you sir.