Color swatches in a dropdown list? : The Official Microsoft ASP.NET Forums

Reply

MikeMartinez

Member

41 Points

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

Reply

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.

Please mark as answered if this post helps you.

Edited by peroija on May 18, 2011 04:43 PM

Reply

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>