Dark and Light Dropdown Lists

Published on
Tags
Dropdown, Select, List, Form
No. of comments
17 comments
Browser compatibility
Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8
License
MIT License
Dark and Light Dropdown Lists CSS Code Snippet

A set of custom <select> dropdown lists in dark and light color schemes.

These are fully functional and accessible without Javascript or images.

They use the native <select> element with a wrapper element to hide the dropdown arrow.

Inspired by Hemn Chawroka's PSD.

17 comments

Robin said
D10a42717ec0186d6948858dd2daecf1

You should use
*:focus {
outline: none;
}
for the Chrome users (removing the yellow outlines)

Thibaut said
B6374f07090c513a73b875e0c5fe5924

Thanks for the tip, Robin, but I intentionally kept and customized the outlines in order to maintain full accessibility.

Adeel said
215b31e53de43cb07d2b2bebf4d5c350

Hi, How can i download all mostly download link not working properly.. pls help me out.
Thanks

Thibaut said
B6374f07090c513a73b875e0c5fe5924

It's fixed, thanks!

Denial said
Cc053d70524ed4b9b61660f48255678b

nice beauty !

climbak said
Ee4d6d0bc4a52565f410346909533982

Any chance you will update this to work with IE10 as well?

Thibaut said
654c04b8110238c9abd7a62e88d53b31

It works for me in IE 10 ;)

Rahul said
1aedb8d9dc4751e229a335e371db8058

When we check this option in IE9 and IE10 then list show on up side. Please provide me solution for this

Thanks

Kamlesh said
6b34c9c2efdff4e8697653a4332982ad

In Firefox, when select is active then the default black drop-down arrow appears instead of the custom arrow. Is there a fix for it?
Thanks

Kamlesh said
6b34c9c2efdff4e8697653a4332982ad

^ fix for this is to add "width" in the .dropdown-select:focus

pistachio said
35a69f400232d87dc487fce17871842c

Hi. this is awesome work. But in my case i have more than 100 items to show in dropdown. So i want it to make scrollable. so can you show how to do it? I tried giving size=5 and overflow:scroll but it ruined it actually.Any help would be so much.

Thibaut said
654c04b8110238c9abd7a62e88d53b31

@pistachio Hi. This snippet only works with a <select> size of one (you can have as many <option> as you want, though). I'd use a totally different design for sizes greater than one.

pistachio said
35a69f400232d87dc487fce17871842c

@Thibaut Thanks for quick reply. I think you misunderstood me. I want to show only One item when its in idle position.But when user clicks on select , It should drop down and should show only 5 items instead of all 100 items, and other item are hidden and user have to scroll down to see them all..Any idea on this?

Thibaut said
654c04b8110238c9abd7a62e88d53b31

@pistachio There is no way to do this using a native <select> element. You have to re-create the dropdown with custom HTML/CSS/JS (e.g. https://github.com/ivaynberg/select2).

pistachio said
35a69f400232d87dc487fce17871842c

Thanks..I will try on your suggestion..Thank you very much.

alitaba said
4b0efd43d7530d83ebaeb0a28239c3f4

hi, what is the blue color when open the menu ? code is #3399ff in the hover of menu items ?? how can I change it ??

Leave a comment