28 CSS Select Boxes

Collection of free HTML and CSS custom select box code examples: dropdown, multiple, custom arrow, etc. Update of June 2018 collection. 4 new items.

Author

FrankieDoodie
October 30, 2018

Links

demo and code

Made with

HTML / CSS

About the code

Custom Select Box

Custom select box dropdown styling.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

• Himalaya Sing
• October 20, 2018

Links

• demo and code
• dribbble shot

Made with

• HTML / CSS

About the code

Pure CSS Select Box with Direction Aware Hover Effect

Pure CSS select box without any JavaScript. When there is hover on an option the motion of icon inside option is decided by the direction of hover i.e up hover or down hover (direction aware hover effect).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

• Veniamin
• August 11, 2017

Links

• demo and code

Made with

• HTML (Pug) / CSS (SCSS)

About the code

Pure CSS Select Box

Select box without using JavaScript and native element.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: –

Author

• Dejan Babić
• December 15, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript (jQuery.js)

About the code

Responsive Custom Select Box

Responsive custom select box with custom scroll.

Author

• Lewis Robinson
• November 27, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript (jQuery.js)

About the code

Image Selection

Image Selection with faux-loading.

Author

• luisdanielroviracontreras
• November 27, 2017

Links

• demo and code

Made with

• HTML
• CSS (materialize.css)
• JavaScript (jQuery.js, materialize.js)

About the code

Materialize Select

Materialize JS style select.

Author

• Matheus Sales
• November 15, 2017

Links

• demo and code

Made with

• HTML/Slim
• CSS/Sass

About the code

Custom Select Wrapper

Custom CSS select wrapper.

Custom Select

A HTML, CSS and jQuery custom select.
Made by Alessandro Falchi
April 5, 2017downloaddemo and code

Custom Select An Option

Custom select, designed to change the typical style of the select in browsers, using JS to display the list when it clicks, and SCSS, to give it style. The Attribute selected work good, test it.
Made by Dany Santos
February 8, 2017downloaddemo and code

Material Design Select Dropdown

Material Design select dropdown with HTML, CSS and JavaScript.
Made by Sam Murphey
January 20, 2017downloaddemo and code

Select Option Interaction

Great example of clean animation. Built with TweenMax GSAP.
Made by Bhakti Al Akbar
December 7, 2016downloaddemo and code

Select Boxes

Select-boxes with HTML, CSS and JS.
Made by Nipun Paradkar
October 22, 2016downloaddemo and code

CSS Styled And Filterable Select Dropdown

Select dropdown – styled and filterable using HTML, CSS and vanilla JS. Works using a input field to grab the value from the dropdown list.
Made by Mari Johannessen
October 13, 2016downloaddemo and code

CSS Only Select

CSS only select (radio + checkbox).
Made by Aoyue
August 24, 2016downloaddemo and code

Select Box With Placeholder

HTML and CSS select box with placeholder.
Made by James Nowland
May 16, 2016downloaddemo and code

CSS Only Select

Select input using radio inputs.
Made by Nicolas Udy
May 9, 2016downloaddemo and code

Pure CSS Select

Select input, only CSS.
Made by Raúl Barrera
April 8, 2016downloaddemo and code

Pretty Select Dropdown

This still uses inputs to maintain the form submission variables, while relying primarily on CSS.
Made by j0be
January 15, 2016downloaddemo and code

Custom Select Box

Custom select box with jQuery.
Made by Vijaya Kumar Vulchi
January 7, 2016downloaddemo and code

Material Design Select

Material design select jQuery version.
Made by LukyVJ
January 3, 2016downloaddemo and code

Horizontal Select

Simple horizontal select.
Made by Bharani
November 23, 2015downloaddemo and code

Author

• Alex
• October 5, 2015

Links

• demo and code
• tutorial

Made with

• HTML / CSS

About the code

Styling Select Box with CSS

A creative way to style select drop downs with nothing but CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: –

Custom Select

Easy way to customize your select inputs.
Made by Christophe CORBALAN
September 10, 2015downloaddemo and code

Select Menu

Select menu with HTML, CSS and JavaScript.
Made by Pierre Laurent
June 23, 2015downloaddemo and code

Custom Select

So so very very basic custom select.
Made by Yusuf
May 1, 2015downloaddemo and code

Custom Select

Custom select with animation.
Made by Nikolay Talanov
September 5, 2014downloaddemo and code

Selectionator

Proof of concept, for a multi select widget.
Made by Benjamin
May 23, 2014downloaddemo and code

CSS3 Card Deck Drop Down

HTML, CSS and JS card deck drop down.
Made by Tibor Katelbach
July 23, 2013downloaddemo and code

• 3918 views
• No Comments on 28 CSS Select Boxes