Comment by Alkshendra Maurya on "What's the best way to design an HTML dropdown menu?"

CommentWhat's the best way to design an HTML dropdown menu?

Alkshendra Maurya

Frontend Engineer | Hashnode Alumnus

Feb 18, 2016

You cannot actually do a whole lot with native HTML <select> as the style implementations are different everywhere and are dependent on the browser/OS of the user. I would actually recommend using a <ul> instead as it would give you a lot of flexibility in terms of styling.

That said, one way you can style a select is by using appearance property, give the <select> tag an appearance:none; so the default styles are stripped off.

Then you can wrap it inside a div and style that div instead. here's a quick pen I made for the demo: codepen.io/alkshendra/pen/gPyEOo

The browser support for appearance is quite good, you can use the usual vendor prefixes and it'd work across most browsers. Check caniuse for a detailed support guide.

Denny Trebbin

Lead Fullstack Developer. Experimenting with bleeding-edge tech. Irregularly DJ. Hobby drone pilot. Amateur photographer.

Feb 18, 2016

<ul> is good for visuals but it isn't that good for users who rely on accessible sites (via WAI-ARIA). U must add and maintain the role attribute to <ul> and <li> elements manually. <select> is tricky but I know a project which helps quite allot. https://github.com/filamentgroup/select-css

Agree with what you're saying, using <select> is the right way to do it if you're trying to make the sites accessible to people with disabilities. Most people are not doing it though, role attribute is the way to go if you want style with accessibility.

Search Hashnode