Home/ Questions/Q 3631298
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T00:22:46+00:00

I’ve searched around google and various web design sites and haven’t had much luck

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0