Dark and Light Dropdown Lists

Published on
Dropdown, Select, List, Form
No. of comments
Browser compatibility
Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8
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.


Robin said

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

Thibaut said

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

Adeel said

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

Thibaut said

It's fixed, thanks!

Denial said

nice beauty !

climbak said

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

Thibaut said

It works for me in IE 10 ;)

Rahul said

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


Kamlesh said

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?

Kamlesh said

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

pistachio said

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

@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

@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

@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

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

alitaba said

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

Stuart said

How do I get the page to redirect to another page based on the user dropdown selection?


sameh said

i found some problems in positioning the select menu "dropdown-select" when i tried to use position:relative; right:10px; it doesnot accept the code and still goes to the left ...i put it in a div with allign right ...it still on the left ...note that the select is in a table row ... so why this happens and what is the solution

christos said

Hi!!! Very beautiful work!!!!
I want to change the hover color in menu!!! Can you help me?
Thanks a lot!!

CliftonMify said

http://kazan.striters.ru/sarafan-aftershock-v-kazani-couture-lyuboy-razmer.html?uq=www.cssflow.com - Сарафан AFTERSHOCK в Казани COUTURE любой размер
http://rostov-na-donu.striters.ru/pringle-of-scotland-kurtka-skidki-i-rostov-na-donu.html?mr=www.cssflow.com - Pringle of Scotland куртка скидки и Ростов-на-Дону распродажи
http://ulyanovsk.striters.ru/top-marki-maria-coca-razmery-na-vybor.html?mv=www.cssflow.com - Топ марки MARIA COCA размеры на выбор в Ульяновске
http://moskva.striters.ru/sumka-ceny-vniz-brend-gherardini-v-moskve.html?mo=www.cssflow.com - Сумка цены вниз бренд Gherardini в Москве
http://ulyanovsk.striters.ru/dostavka-besplatnaya-ot-v-ulyanovske-giorgio-armani.html?dm=www.cssflow.com - Доставка бесплатная от в Ульяновске Giorgio Armani жакет

Leave a comment