35 Cool CSS Select Boxes
Check these cool select boxes, most are made with CSS only and some with little js.
You may also like
- CSS Radio Buttons
- 75 CSS Text Animations You Can Use
- 15 Amazing CSS Animated Background for you to try
- 57 Beautiful CSS Cards examples to improve your UI
- 19 Cool CSS Loading Animation to inspire you
- 17 Fancy CSS Search Boxes
- 21 Modern CSS menu examples
- 19 Stylish CSS forms
- 23 Fantastic CSS Hover Effects
- 19 CSS Border Animations you can implement
- 15 Stylised CSS Tables
- 13 Pure CSS Dropdown Menus
- 15 Creative CSS Filter Examples
- 35 Unique CSS Text Effects
- 15 CSS Sliders you can use
- 21 New Bootstrap Login Forms for you
- 19 Bootstrap Profiles you can use for yourself
- 13 Material Design Login Forms
- 15 CSS Range Sliders you can use today
- 35 Creative use of CSS clip-path examples
- 29 Unique CSS Toggle Switches
- 41 Beautiful CSS Animation Examples
Pure CSS Select Box
Dev: Veniamin
Pure CSS Select Box With Direction Aware Hover Effect
Dev: Himalaya Singh
Pure CSS Select Box Styling
Dev: Anselm Urban
Custom Select Box Dropdown Styling
Dev: FrankieDoodie
Select Box with Placeholder [CSS Only]
Dev: James Nowland
uSwitch pure CSS select control v1.0
Dev: Craig Morey
Custom select box
Dev: James Barnett
Custom select box by VJ
See the Pen Custom select box by VJ by Vijaya Kumar Vulchi (@vulchivijay) on CodePen.
Dev: Vijaya Kumar Vulchi
Responsive custom select box with custom scroll
Dev: Dejan Babić
Flat selectbox
Dev: Peter Geller
Pure CSS “select” box
Dev: Thierry
CSS Select Box
See the Pen CSS Select Box by Josh Valdivieso (@Xero2112) on CodePen.
Dev: Josh Valdivieso
CSS Select box
Customizable Pure CSS Select Box Mixin
Dev: Jason Muscarella
css select box
Dev: hoahuongduong_dh08dt
CSS3:SelectBox with Only CSS
custom select box CSS3
Dev: Gulshan kumar
Custom select with SASS (no JS)
Dev: Jeroen van Beek
Custom select box
Dev: rajeshdn
css – Custom select box arrow
Magic with details // CSS Only Dropdown
Dev: Steffen
Pure CSS Dropdown
See the Pen Pure CSS Dropdown by Rafael González (@rgg) on CodePen.
Dev: Rafael González
CSS Dropdown
Dev: Tadaima
Select (placeholder disabled)
Dev: Andreas Storm
Pure CSS Select 2.0
Dev: Raúl Barrera
Pure CSS Select
See the Pen Pure CSS Select by Raúl Barrera (@raubaca) on CodePen.
Dev: Raúl Barrera
CSS only Select ( radio + checkbox ) No JS
CSS / select with SVG arrow as background image
Dev: henning fischer
pure css select with colorable svg arrow
Dev: Jan Wagner
Full CSS stylized select V2
Dev: Vincent Durand
Custom Select an Option
Dev: Dany Santos
Pure CSS Select Component
Dev: Arnau Pujol
Select-Boxes
See the Pen Select-Boxes by Nipun Paradkar (@radiantshaw) on CodePen.
Dev: Nipun Paradkar
Image Selection with faux-loading
Dev: Lewis Robinson
Material design select box
Dev: Valentin Mocanu
How to Style a Select Dropdown Box Using CSS Only
In this tutorial, learn how to style a select dropdown box in CSS. The short answer is to use the ‘ appearance: none ‘ CSS property that removes the overall default style including the arrow.
You can also use the CSS property ‘ overflow: hidden ‘ to change the arrow of the select dropdown box. Let’s find out the different methods to style the select box with the examples given below.
How to Style a Select Dropdown Box in CSS
You can change the background, font size, the color of text, add borders, and other properties to style the select dropdown box using CSS properties. It’s easier to style CSS as given in the example below.
The above example shows the added background, the color of the text, and the font size of the select box.
However, you cannot change the default with these CSS properties. Let’s find out the below methods to change the default arrow of the select box.
Change Select Dropdown Arrow Using ‘appearance: none’ in CSS
The default select box contains an arrow that shows the dropdown in a form. However, you can change the select dropdown arrow using the CSS property ‘ appearance: none ‘. It removes the overall style of the select box. After that, you can add your style to the select box as per your requirements.
You can add font awesome icons in place of the select box arrow. After that, you can change the color and font size of the font awesome icon to match it with your select dropdown box.
How To Style HTML Select Dropdown Using Only CSS
Styling an HTML select dropdown was always pretty frustrating because the annoying drop down arrow always stays the same. There isn’t too much stuff we can apply to it, just properties like color, background, font or border. As there is no direct way to do style it, it took me a while to figure out how easily we can style an HTML select dropdown using only CSS.
In this article, I’m going to show you a quick and easy way to style the select dropdown.
Disclaimer, Though there are a lot of jQuery plugins that can help you build beautiful and sophisticated dropdowns, sometimes I feel, it is just too much for a dropdown.
The HTML markup
To get started, we just need a default HTML drop-down markup.
The CSS
The default dropdown arrow and a border is all part of the default «appearance» of the form element.So, you just need to make sure appearance: none; is set in your styling css. Here background image holds the custom arrow.
/* body select.select_box */ body select < display: block; padding: 10px 70px 10px 13px !important; max-width: 100%; height: auto !important; border: 1px solid #e3e3e3; border-radius: 3px; background: url("https://i.ibb.co/b7xjLrB/selectbox-arrow.png") right center no-repeat; background-color: #fff; color: #444444; font-size: 12px; line-height: 16px !important; appearance: none; /* this is must */ -webkit-appearance: none; -moz-appearance: none; >/* body select.select_box option */ body select option < padding: 0 4px; >/* for IE and Edge */ select::-ms-expand < display: none; >select:disabled::-ms-expand
Knowing this little quick and easy workaround will make it a whole lot easier to style select dropdown. If you see any issues with CSS or not working as expected, Your site probably have some default styles that might conflict. In that scenario, you’ve to use the above CSS in a class.
If you like this post, I would also recommend that you read another tutorial on «How To Style Checkbox or Radio Button Using Only CSS»