Up to 70% off on hosting for WordPress Websites $2.95 /mo

Csshint recommends hosting

css • html

20 Free CSS & JavaScript Select Boxes Snippets

5 years ago

Free CSS & JavaScript Select Boxes Snippets

Written by admin

Collection of free HTML and CSS custom select box Design elements using Bootstrap, javascript, css, and htm examples: dropdown, multiple, custom arrow, etc. The best free select Boxes .

1.Dropdown Menu

<br /> See the Pen <a href='https://codepen.io/General-Dev/pen/JRjwPa/'>Dropdown Menu</a> by Mostafa<br /> (<a href='https://codepen.io/General-Dev'>@General-Dev</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Mostafa
Created SEPTEMBER 03, 2016

Made with

HTML / CSS / js

demo and code Get Hosting

2.Select Option Interaction

Author

Bhakti Al Akbar
Created AUGUST 29, 2015

demo and code Get Hosting

3.Custom dropdown

<br /> See the Pen <a href='https://codepen.io/silverdrop/pen/msrcE/'>Custom dropdown</a> by Silver Drop<br /> (<a href='https://codepen.io/silverdrop'>@silverdrop</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Silver Drop
Created MARCH 01, 2014

Made with

HTML / CSS / js

demo and code Get Hosting

4.Custom Select Menu

<br /> See the Pen <a href='https://codepen.io/wallaceerick/pen/ctsCz/'>Custom Select Menu</a> by Wallace Erick<br /> (<a href='https://codepen.io/wallaceerick'>@wallaceerick</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Wallace Erick
Created SEPTEMBER 17, 2013

Made with

HTML / SCSS / js

demo and code Get Hosting

5.Custom Select an Option

<br /> See the Pen <a href='https://codepen.io/THEORLAN2/pen/Kaewmw/'>Custom Select an Option</a> by Dany Santos<br /> (<a href='https://codepen.io/THEORLAN2'>@THEORLAN2</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Dany Santos
February 8, 2017

Made with

HTML / SCSS / js

demo and code Get Hosting

6.Simple custom select

<br /> See the Pen <a href='https://codepen.io/afalchi82/pen/aNXjgb/'>Simple custom select</a> by Alessandro Falchi<br /> (<a href='https://codepen.io/afalchi82'>@afalchi82</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Alessandro Falchi
April 5, 2017

Made with

HTML / SCSS / js

demo and code Get Hosting

7.Select Box with Placeholder [CSS Only]

<br /> See the Pen <a href='https://codepen.io/jnowland/pen/GZLQBw/'>Select Box with Placeholder [CSS Only]</a> by James Nowland<br /> (<a href='https://codepen.io/jnowland'>@jnowland</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

James Nowland

Made with

HTML / SCSS / js

demo and code Get Hosting

8.Custom select box Jquery Plugin by VJ

<br /> See the Pen <a href='https://codepen.io/vulchivijay/pen/rxyBpg/'>Custom select box Jquery Plugin by VJ</a> by Vijaya Kumar Vulchi<br /> (<a href='https://codepen.io/vulchivijay'>@vulchivijay</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Vijaya Kumar Vulchi

Made with

HTML / LESS/ js

demo and code Get Hosting

9.Select Menu

<br /> See the Pen <a href='https://codepen.io/Paddle_/pen/LVLgVw/'>Select Menu</a> by Pierre Laurent<br /> (<a href='https://codepen.io/Paddle_'>@Paddle_</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Pierre Laurent

Made with

HTML / CSS/ JS

demo and code Get Hosting

10.Flat selectbox

<br /> See the Pen <a href='https://codepen.io/PeterGeller/pen/wksIF/'>Flat selectbox</a> by Peter Geller<br /> (<a href='https://codepen.io/PeterGeller'>@PeterGeller</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Peter Geller

Made with

HTML / CSS/ JS

demo and code Get Hosting

11.Custom Select

<br /> See the Pen <a href='https://codepen.io/yy/pen/vOYqYV/'>Custom Select</a> by Yusuf<br /> (<a href='https://codepen.io/yy'>@yy</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Yusuf

Made with

HTML / CSS/ JS

demo and code Get Hosting

12.Custom Select

<br /> See the Pen <a href='https://codepen.io/suez/pen/CqjBf/'>Custom select</a> by Nikolay Talanov<br /> (<a href='https://codepen.io/suez'>@suez</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Nikolay Talanov

Made with

HTML / SCSS/ JS

demo and code Get Hosting

13.Selectionator

<br /> See the Pen <a href='https://codepen.io/maggiben/pen/ubHiy/'>Selectionator</a> by Benjamin<br /> (<a href='https://codepen.io/maggiben'>@maggiben</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Benjamin

Made with

HTML / LESS/ JS

demo and code Get Hosting

14.styled drop down with nojs support

<br /> See the Pen <a href='https://codepen.io/andyfitz/pen/HjaBk/'>styled drop down with nojs support</a> by Andy Fitzsimon<br /> (<a href='https://codepen.io/andyfitz'>@andyfitz</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Andy Fitzsimon

Made with

HTML /SCSS/ JS

demo and code Get Hosting

15.Accessible checkboxes and radio buttons

<br /> See the Pen <a href='https://codepen.io/michmy/pen/jBQQpp/'>Accessible checkboxes and radio buttons</a> by Michelle<br /> (<a href='https://codepen.io/michmy'>@michmy</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Michelle

Made with

HTML /STYLUS

demo and code Get Hosting

16.CSS3 Card Deck Drop Down

<br /> See the Pen <a href='https://codepen.io/oceatoon/pen/GJpvz/'>CSS3 Card Deck Drop Down</a> by Tibor Katelbach<br /> (<a href='https://codepen.io/oceatoon'>@oceatoon</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Tibor Katelbach

Made with

HTML /SCSS / JS

demo and code Get Hosting

17.Custom select

<br /> See the Pen <a href='https://codepen.io/RedStarZOn/pen/GuriA/'>Custom <select></a> by Christophe CORBALAN<br /> (<a href='https://codepen.io/RedStarZOn'>@RedStarZOn</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Christophe CORBALAN

Made with

HTML /CSS/ JS

demo and code Get Hosting

18.SVG Icon Menu

<br /> See the Pen <a href='https://codepen.io/CarrieWiley/pen/jgupn/'>SVG Icon Menu</a> by Carrie Wiley<br /> (<a href='https://codepen.io/CarrieWiley'>@CarrieWiley</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Carrie Wiley

Made with

HTML /SASS/ JS

demo and code Get Hosting

19.Dark and Light Dropdown Lists

<br /> See the Pen <a href='https://codepen.io/Thibaut/pen/Jasci/'>Dark and Light Dropdown Lists</a> by Thibaut<br /> (<a href='https://codepen.io/Thibaut'>@Thibaut</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Thibaut

Made with

HTML /SASS/ JS

demo and code Get Hosting

20.Pretty Select dropdown

<br /> See the Pen <a href='https://codepen.io/j0be/pen/jWGVvV/'>Pretty Select dropdown</a> by j0be<br /> (<a href='https://codepen.io/j0be'>@j0be</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

j0be

Made with

HTML /SCSS/ JS

demo and code Get Hosting