Awesome CSS Select Styles You Can Use Right Now

The <select> element is used to create a drop-down list. The select box allows you to offer visitors a dropdown selection of options. This is helpful when creating an application or asking questions with a range of values.

The <select> element is used to create a drop-down list. The select box allows you to offer visitors a dropdown selection of options. This is helpful when creating an application or asking questions with a range of values.

The default HTML select boxes do the job but have become a little archaic. Due to the development of CSS, designers have been able to customize select boxes. You can use them due to the open-source codes available online for free.

Below is a list of 42 hand-picked select box styles. It’s easy to set them up and you can re-style them if you wish.

Custom Select Field Styling with Only CSS

Designed by: Stephanie Eckles

This is a demo showing how to make a cross-browser custom-styled select box.

SELECT right-arrow with CSS

Designed by: Veiko

Select elements do not permit pseudo-classes. Arrow.png doesn’t seem to be a good solution either. This is a CSS solution with a “linear background.”

Custom Select Menu

Designed by: Wallace Erick

This select box uses CSS for restyling as well as JavaScript for menus UX configuration. These kinds of boxes behave a little differently than regular HTML selects and some find them more agreeable to use.

It is a good option for those who are looking for fresh and clean select menus that work well.

Magic with details // CSS Only Dropdown

Designed by: Steffen

Pure css select full customization

Designed by: Евгений

That is full custom select without JS

Design visually attractive and high-performing websites without writing a line of code

WoW your clients by creating innovative and response-boosting websites
fast with no coding experience. Slider Revolution makes it possible for you
to have a rush of clients coming to you for trendy website designs.

pure css select with colorable svg arrow

Designed by: Jan Wagner

Dropdown Menu

Designed by: Mostafa

This select uses a plain black and white color scheme and subtle colors. JavaScripts is utilized to move the menu in and out of view.

This is done by targeting a hidden input field that displays the same behavior as a select field. This solution doesn’t in reality use the <select> element which allows you to pull data from the frontend into your forms.

Full CSS stylized select V2

Designed by: Vincent Durand

Custom Select Wrapper

Designed by: Matheus Sales

This select can be used for contact structures. You can use it as a model and if you have an online store, you can set the alternative as “Credit card” or “Cash on delivery,” etc.

uSwitch pure CSS select control v1.0

Designed by: Craig Morey

This select doesn’t use JS or external images. It only uses one style sheet. It attempts to be an elegant, pure CSS-styled scalable select box with minimal extra HTML. It can be used for cross-browser/platform use.

css select style

Designed by: uixcrazy.com

Custom Select Box Dropdown Styling

Designed by: FrankieDoodie

This is a custom select box dropdown styling. It was made with HTML and CSS.

Pure CSS select dropdown styling

Designed by: Justin Danks

Pure CSS select dropdown

Designed by: Robin Garbe

Custom dropdown

Designed by: Silver Drop

As its description suggests, this set of select menus tries to make HTML dropdowns not suck. Each box is a different size and there are buttons enabling you to change colors at any time.

It is possible to remove that feature if you only want to use one scheme that works best for your site. 

The bottom line is that these select menus work perfectly fine and are pleasant to use. 

Pure CSS Select Box With Direction Aware Hover Effect

Designed by: Himalaya Sing

This CSS select box comes with a drift impact and is visually very pleasing. The options in the drop-down menu have different colors. There is a catch here and there in the container. 

Select Box with Placeholder [CSS Only]

Designed by: James Nowland

The creator of this select menu wanted to remove the default from the selection options. This makes it behave similar to a placeholder in text fields. It is visible when the field is blank and disappears when you input a value. 

This select menu is fully compliant and works with the actual HTML element. The user never sees the “select an option” text in the drop-down menu since an option field is hidden by default whenever the user makes a selection.

Pure CSS Select Box

Designed by: Veniamin

This CSS select box doesn’t use JavaScript and a native element. The CSS structure is fantastic and boasts a descending bolt to give a user a selection of choices.

Flat selectbox

Designed by: Peter Geller

This flat select menu is a good example showing that looks and aesthetics matter in web design. 

It behaves just like a regular select menu and the drop-down part has not been changed. However, the way the select itself was restyled makes the page more exciting. It is much classier than the unattractive browser default select box.

Custom Select an Option

Designed by: Dany Santos

This custom select was designed to change the traditional style of the select in browsers. JS is used to display the list when a user clicks on it, and SCSS to style it. The Attribute selected works well.

Material Design Select Dropdown

Designed by: Sam Murphey

This select drop-down menu was created with CSS, HTML, and JavaScript.

CSS Review: Select Box

Designed by: Steven Estrella (sgestrella)

This common select box can be styled with CSS while retaining accessibility.

Select Option Interaction

Designed by: Bhakti Al Akbar

This is a nice example of clean animation. It was built with TweenMax GSAP.

Pure CSS Select Box With Direction Aware Hover Effect

Designed by: Mina Nabil (mnainnovix)

This is a pure CSS select box that doesn’t use any JavaScript. It utilizes a direction-aware hover effect. When a user hovers over an option, the motion of the icon inside the option is determined by the direction of the hover (up or down).

CSS styled and filterable select dropdown

Designed by: Mari Johannessen

This select drop-down menu was styled utilizing CSS, HTML, and vanilla JS. It uses an input field to grab the value from the dropdown list.

Pure CSS Select Box

Designed by: Danny Dorstijn (Lightningstorms)

This is a CSS select box created without JavaScript and a native element.

Pretty Select dropdown

Designed by: j0be

This select box relies primarily on CSS while still using inputs to maintain the form submission variables.

CodePen Home

Designed by: Alex

This is an example of a creative way to style CSS select drop-down menus using only CSS.

Pure CSS Select Box Styling

Designed by: Anselm Urban (a-urban)

This is CSS select box styling in pure CSS. Works fine in every modern browser. 

Customize the <select> element with CSS

Designed by: Mike Mai

This demo shows a way to take full control of the element and customize it to your preference.

Custom <select>

Designed by: Christophe CORBALAN

This CSS select box stands out due to a design comprising an orange background with a white box in the center.

CSS / select with SVG arrow as background image

Designed by: henning fischer

Material design select

Designed by: LukyVJ

CSS only Select

Designed by: Nicolas Udy

Many common CSS select menus conceal when you click anywhere else on the page. This one does not do that. It drops down with full movement impacts and stays open until you click on the menu again.

It is a good example of a select menu with a clean structure and basic liveliness.

Pure CSS select option

Designed by: Anna Blok

CSS3 Card Deck Drop Down

Designed by: Tibor katelbach

This is an example of a UI concept using a gradient grey background. The title is big-size and is placed in the center of the page. CSS3 is in bold. It is easy to set global variables using the Toggler Click handler. 

Pure CSS Select

Designed by: Raúl Barrera

Custom Select

Designed by: Yusuf

This is a very basic custom CSS select.

CSS only Select ( radio + checkbox ) No JS

Designed by: Aron

This is a CSS select box with an eye-catching blue and pink background. There is a big arrow and text at the top and three boxes with the word “Choose” inside. When you click on it, the drop-down selection appears. Each option is highlighted when you hover over it. 

CSS styled and filterable select dropdown

Designed by: Mari Johannessen

This is a CSS select design that makes the content of the drop-down menu stand out using a black background.

Simple custom select

Designed by: Alessandro Falchi

Selectionator

Designed by: Benjamin

This is a very interesting concept of a multi-select widget.

If you enjoyed reading this article with CSS select styles, you should check out this one about CSS arrows.

We also wrote about a few related subjects like Bootstrap carousel templatesBootstrap gallery templatesHTML and CSS menuHTML and CSS formsBootstrap login form templates and Bootstrap search boxes.

Awesome CSS Select Styles You Can Use Right Now

FREE: Your Go-To Guide For Creating
Awe-Inspiring Websites

Get a complete grip on all aspects of web designing to build high-converting and creativity-oozing websites. Access our list of high-quality articles and elevate your skills.

The Author

SR Staff

We're a passionate bunch of designers and developers writing about the ins and outs of web design.

Liked this Post?
Please Share it!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.