2

I've searched around google and various web design sites and haven't had much luck finding information on a elegant solution to designing a nice select drop down box within a form.

My text input fields are very large (50px in height) and I'm looking to get the same height/feel out of the select boxes as well.

My concerns are having 2+ sets of images for the box to match each systems native form element. Any suggestions?

Thanks.

Improve this question
2

1 Answer 1

Reset to default
2

For usability and accessibility reasons, don't use anything other than a <select> element. Use CSS to get it to appear as you wish to the degree that the user's browser allows.

If you try to 'create' your own select, or use someone else's library, you are almost certainly going to create something that looks prettier (more consistent with your site's non-standard design) but is less obvious to users and (more importantly) does not work the same way that normal selects do.

For example, when I last checked (some years ago) if you open a select and start typing:

  • in IE/Windows typing the same character repeatedly selects successive elements starting with that letter (e.g. pressing 'c' repeatedly might select first "Cambodia" and then "Cameroon" and then "Canada"); typing another letter, even rapidly, selects the first item starting with that other letter (e.g. typing 'can' would select first "Cambodia" and then "Afghanistan" and then "Namibia").

  • In Safari/Mac typing quickly selects options as you spell them (e.g. typing 'can' selects first "Cambodia" and then "Cambodia" and then "Canada").

Are you going to write JavaScript code to echo this behavior, detecting platform? Are you going to support differences between not just Windows and OS X, but various Linux windowing flavors? Are you going to check the behavior each time a new OS version is released to update your script accordingly?

Are you sure that you'll handle the mouse wheel correctly when the element is focused? For every GUI variation?

Will your pseudo-select work with your form validation? What about tab focusing? What about accesskey shortcuts?

Please, please, use a real <select> element and accept what limitations you may have.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

+1 Agreed, simply style it with css. You can use css to use images as background too, if that's what you are after.
Thanks for the advice. It is simply not in my clients budget for me to spend that amount of time building UX around a custom form element, so I guess I'll stick with what minimal flexibility I have in the browser as is.
while I completely agree with the consistency of usability for a given browser (ie. you may expect all select box to behave the same in a given browser, whatever website you are browsing), one might argue that you will loose the consistency of your own website's select/dropdown boxes across browsers by "letting the browser" use its own implementation.
another point, "how many users actually know the exact behavior for a select/dropdown box?". A good plugin, something that has been used & approved by a large community of users (ie. harvesthq.github.io/chosen which supports Firefox, Chrome, Safari and IE9+ [Legacy support for IE8 is also enabled]), might just be the right answer if your design requirement is high.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.