Custom dropdown boxes

Adam

Hey guys,

Probably a quick question here, but I'm wondering how one goes about using a custom dropdown box? And by custom I dont mean different size/background colour etc. I mean completely custom. Please see attached image! Thanks!

seamus

That's a Mac standard dropdown box, no?

Adam

That's what I thought, but it also came in a photoshop website design from a client, do I have to try and explain that it can't be done? Or is there a way?

seamus

Ugh. You could probably develop a custom box using Javascript and multiple images, but it twould be super bloatware and results would probably vary from browser to browser and user to user.

Best to just explain that's how the box looks on a Mac, but on a PC it'll look more traditional. Of course you can use CSS to keep it looking trendy and fitting in with the rest of the site.

Adam

Yeah, about that, I couldn't find much on customization of select boxes on the interweb, any handy links or tutorials? All I found was the likes of margins, background colours etc, in which case I probably wouldn't bother.

seamus

Well, that's all you can really do with drop-downs. There's no fine-grain customistation in CSS, such as changing the image of the button.

Basically off the top of my head, if you wanted to create your own drop-down box, you'd need to start out obviously with the initial option for the drop-down, say the above image that you post. Then a Hidden div, containing all the possible options for that drop-down. When the user clicks on the drop-down, the div appears, giving them a list of options. When they click (i.e. select) one of the options, this runs a javascript trigger which changes the image on the drop-down to one corresponding to the option they just chose. I'd then use a hidden input box to actually contain the data that you wish to submit for the option, and update that along with the image in the Javascript trigger.

It would definitely be an interesting exercise if you have some spare time, but you may tear your hair out trying to get it smooth. It'll never look as smooth or natural as it would on the Mac though.

Eoin

By no means a more elegant or usable solution (quite the opposite), but I would think that a Flash dropdown menu would probably allow for a more customisable look.