Css select box selected

31 CSS Select Boxes

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

Related Articles:

Author

Links

Made with

About a code

Custom Select Field Styling with Only CSS

Demo of how to create a cross-browser custom styled select.

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

Author

Links

Made with

About a code

CSS Only Dropdown

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

Author

Links

Made with

About a code

Select (Placeholder Disabled)

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

Author

Links

Made with

About the code

Custom Select Box

Custom select box dropdown styling.

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

Author

Links

Made with

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

Author

Links

Made with

About the code

Pure CSS Select Box

Select box without using JavaScript and native element.

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

Author

Links

Made with

About the code

Responsive Custom Select Box

Responsive custom select box with custom scroll.

Author

Links

Made with

About the code

Image Selection

Image Selection with faux-loading.

Author

Links

Made with

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

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

Material Design Select Dropdown

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

Select Option Interaction

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

Select Boxes

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

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

CSS Only Select

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

Select Box With Placeholder

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

CSS Only Select

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

Pure CSS Select

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

Pretty Select Dropdown

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

Custom Select Box

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

Material Design Select

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

Источник

How TO — Custom Select Box

Learn how to create custom select boxes with CSS and JavaScript.

Custom Select Box

Create a Custom Select Menu

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

/* The container must be positioned relative: */
.custom-select position: relative;
font-family: Arial;
>

.custom-select select display: none; /*hide original SELECT element: */
>

.select-selected background-color: DodgerBlue;
>

/* Style the arrow inside the select element: */
.select-selected:after position: absolute;
content: «»;
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
>

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after border-color: transparent transparent #fff transparent;
top: 7px;
>

/* style the items (options), including the selected item: */
.select-items div,.select-selected color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
>

/* Style items (options): */
.select-items position: absolute;
background-color: DodgerBlue;
top: 100%;
left: 0;
right: 0;
z-index: 99;
>

/* Hide the items when the select box is closed: */
.select-hide display: none;
>

.select-items div:hover, .same-as-selected background-color: rgba(0, 0, 0, 0.1);
>

Step 3) Add JavaScript:

Example

var x, i, j, l, ll, selElmnt, a, b, c;
/* Look for any elements with the class «custom-select»: */
x = document.getElementsByClassName(«custom-select»);
l = x.length;
for (i = 0; i < l; i++) selElmnt = x[i].getElementsByTagName("select")[0];
ll = selElmnt.length;
/* For each element, create a new DIV that will act as the selected item: */
a = document.createElement(«DIV»);
a.setAttribute(«class», «select-selected»);
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/* For each element, create a new DIV that will contain the option list: */
b = document.createElement(«DIV»);
b.setAttribute(«class», «select-items select-hide»);
for (j = 1; j < ll; j++) /* For each option in the original select element,
create a new DIV that will act as an option item: */
c = document.createElement(«DIV»);
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener(«click», function(e) /* When an item is clicked, update the original select box,
and the selected item: */
var y, i, k, s, h, sl, yl;
s = this.parentNode.parentNode.getElementsByTagName(«select»)[0];
sl = s.length;
h = this.parentNode.previousSibling;
for (i = 0; i < sl; i++) if (s.options[i].innerHTML == this.innerHTML) s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName(«same-as-selected»);
yl = y.length;
for (k = 0; k < yl; k++) y[k].removeAttribute("class");
>
this.setAttribute(«class», «same-as-selected»);
break;
>
>
h.click();
>);
b.appendChild(c);
>
x[i].appendChild(b);
a.addEventListener(«click», function(e) /* When the select box is clicked, close any other select boxes,
and open/close the current select box: */
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle(«select-hide»);
this.classList.toggle(«select-arrow-active»);
>);
>

function closeAllSelect(elmnt) /* A function that will close all select boxes in the document,
except the current select box: */
var x, y, i, xl, yl, arrNo = [];
x = document.getElementsByClassName(«select-items»);
y = document.getElementsByClassName(«select-selected»);
xl = x.length;
yl = y.length;
for (i = 0; i < yl; i++) if (elmnt == y[i]) arrNo.push(i)
> else y[i].classList.remove(«select-arrow-active»);
>
>
for (i = 0; i < xl; i++) if (arrNo.indexOf(i)) x[i].classList.add("select-hide");
>
>
>

/* If the user clicks anywhere outside the select box,
then close all select boxes: */
document.addEventListener(«click», closeAllSelect);

Источник