For the CSS for the radio buttons use the pseudo class label.swatch:checked
Jason Westbrook | T: 313-799-3770 | [email protected] On Thu, Mar 21, 2013 at 6:04 AM, Walter Lee Davis <[email protected]>wrote: > 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 <[email protected]> > 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 [email protected]. > > > To post to this group, send email to > [email protected]. > > > 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 [email protected]. > > To post to this group, send email to > [email protected]. > > 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 [email protected]. > > To post to this group, send email to > [email protected]. > > 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 [email protected]. > To post to this group, send email to > [email protected]. > 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
