With as few choices as you have, I would be tempted to add them as a field of radio buttons, and use CSS to replace the buttons with color swatches directly. No need for any JavaScript at all.
<label class="swatch"><img src="red.png" alt="red" /><input type="radio" name="color" value="red" /></label> ... label.swatch { display: inline-block; height: 20px; width: 20px; } label.swatch input { display: none; } Where you might need to break out the Prototype is to decorate the chosen element, can't think of how to do that in CSS off the top of my head. $$('input[name="color"]').each(function(elm){ if(elm.checked){ elm.previous('img').addClassName('selected'); }else{ elm.previous('img').removeClassName('selected'); } }); Walter On Mar 21, 2013, at 6:32 AM, Phil Petree wrote: > Morning Walter... > > That was the approach I took last night... it works but its just not as > attractive as I'd like... still seems like their should be a more stylish way. > > I may just opt for something like the color selector used on a number of > clothing sites... like this one: > http://www.brooksbrothers.com/mens/polos-knits/0298,default,sc.html?lid=leftnav-menu > > Basically they just put color swatch/squares in a row and allow you to > mouseover to see the effects and a click selects that color. > On Thu, Mar 21, 2013 at 12:05 AM, Walter Lee Davis <wa...@wdstudio.com> wrote: > I think you're going to need to update a swatch next to the picker, maybe. > The select is remarkably styling-resistant in Safari, probably Chrome as > well. I would absolutely position a little dot off to the left of the select, > and update its background color on the change event of the select. > > Walter > > On Mar 20, 2013, at 3:12 PM, Phil Petree wrote: > > > I want users to be able to pick from one of 6 colors for a folder (like a > > file folder). > > > > At first I thought about doing this as a <select><option value='color_blue' > > style='background-image: url(blue.png);'></option> > > > > But I'm discovering this will really only render well in firefox... > > > > Has anyone discovered how to do this using proto/scripty? > > > > Thanks > > > > -- > > You received this message because you are subscribed to the Google Groups > > "Prototype & script.aculo.us" group. > > To unsubscribe from this group and stop receiving emails from it, send an > > email to prototype-scriptaculous+unsubscr...@googlegroups.com. > > To post to this group, send email to > > prototype-scriptaculous@googlegroups.com. > > Visit this group at > > http://groups.google.com/group/prototype-scriptaculous?hl=en. > > For more options, visit https://groups.google.com/groups/opt_out. > > > > > > -- > You received this message because you are subscribed to the Google Groups > "Prototype & script.aculo.us" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to prototype-scriptaculous+unsubscr...@googlegroups.com. > To post to this group, send email to prototype-scriptaculous@googlegroups.com. > Visit this group at > http://groups.google.com/group/prototype-scriptaculous?hl=en. > For more options, visit https://groups.google.com/groups/opt_out. > > > > > -- > You received this message because you are subscribed to the Google Groups > "Prototype & script.aculo.us" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to prototype-scriptaculous+unsubscr...@googlegroups.com. > To post to this group, send email to prototype-scriptaculous@googlegroups.com. > Visit this group at > http://groups.google.com/group/prototype-scriptaculous?hl=en. > For more options, visit https://groups.google.com/groups/opt_out. > > -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To unsubscribe from this group and stop receiving emails from it, send an email to prototype-scriptaculous+unsubscr...@googlegroups.com. To post to this group, send email to prototype-scriptaculous@googlegroups.com. Visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en. For more options, visit https://groups.google.com/groups/opt_out.