20 CSS Select Boxes

June 13, 2017 | by Vladimir Stepura

Collection of free HTML, CSS and little JS select boxes. Demo and download code (*zip).

Demo Image: Custom Select
Demo Image: Custom Select

Custom Select

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

Demo Image: Custom Select An Option
Demo Image: Custom Select An Option

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, 2017

Demo Image: Material Design Select Dropdown
Demo Image: Material Design Select Dropdown

Material Design Select Dropdown

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

Demo Image: Select Option Interaction
Demo Image: Select Option Interaction

Select Option Interaction

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

Demo Image: Select Boxes
Demo Image: Select Boxes

Select Boxes

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

Demo Image: CSS Styled And Filterable Select Dropdown
Demo Image: CSS Styled And Filterable Select Dropdown

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, 2016

Demo Image: CSS Only Select
Demo Image: CSS Only Select

CSS Only Select

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

Demo Image: Select Box With Placeholder
Demo Image: Select Box With Placeholder

Select Box With Placeholder

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

Demo Image: CSS Only Select
Demo Image: CSS Only Select

CSS Only Select

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

Demo Image: Pure CSS Select
Demo Image: Pure CSS Select

Pure CSS Select

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

Demo Image: Pretty Select Dropdown
Demo Image: Pretty Select Dropdown

Pretty Select Dropdown

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

Demo Image: Custom Select Box
Demo Image: Custom Select Box

Custom Select Box

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

Demo Image: Material Design Select
Demo Image: Material Design Select

Material Design Select

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

Demo Image: Horizontal Select
Demo Image: Horizontal Select

Horizontal Select

Simple horizontal select.
Made by Bharani
November 23, 2015

Demo Image: Custom Select
Demo Image: Custom Select

Custom Select

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

Demo Image: Select Menu
Demo Image: Select Menu

Select Menu

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

Demo Image: Custom Select
Demo Image: Custom Select

Custom Select

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

Demo Image: Custom Select
Demo Image: Custom Select

Custom Select

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

Demo Image: Selectionator
Demo Image: Selectionator

Selectionator

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

Demo Image: CSS3 Card Deck Drop Down
Demo Image: CSS3 Card Deck Drop Down

CSS3 Card Deck Drop Down

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

FreeFrontend © 2016 - 2017

Back to top