Custom Select Dropdown

A customizable select element that works cross-browser.

The custom select menu is some helpful HTML & CSS for when you need a non-default select menu styled for a design. This does not include the open menu state. If that needs styling you will have to evaluate a plugin like Selectize or Chosen. Both are fine options.

Examples

Usage

<label for="custom">Custom Select</label>
<div class="custom-select">
  <select name="custom" id="custom">
    <option value="custom-1">Option 1</option>
    <option value="custom-2">Option 2</option>
    <option value="custom-3">Option 3</option>
    <option value="custom-4">Option 4</option>
    <option value="custom-5">Option 5</option>
    <option value="custom-6">Option 6</option>
    <option value="custom-7">Option 7</option>
    <option value="custom-8">Option 8</option>
    <option value="custom-9">Option 9</option>
    <option value="custom-10">Option 10 THIS IS REALLY REALLY LONG</option>
  </select>
</div>

					
.custom-select {
  background: #fff;
  border: 1px solid #ccc;
  height: 36px;
  overflow: hidden;
  position: relative;
}

.custom-select:after {
  border-color: #000 transparent transparent transparent;
  border-style: solid;
  border-width: 9px 7px 0 9px;
  content: '';
  height: 0;
  pointer-events: none;
  position: absolute;
  right: 10px;
  speak: none;
  top: 14px;
  width: 0;
}

.custom-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  color: #000;
  font-family: inherit;
  font-size: inherit;
  height: 100%;
  margin: 0;
  padding: 0 28px 0 8px;
  width: 100%;
  width: 110% \9;
  z-index: 2;
}

.custom-select select:focus {
  box-shadow: inset 0 0 0 1px blue;
  outline: transparent;
}

.custom-select select::-ms-expand {
  display: none;
}

.custom-select select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

Documentation

Installation

This component is all CSS, so the documentation surrounds the default class available. To install this component all you need is the above HTML and CSS.

Class

Class used for this component
.custom-select Wrapping class for the component.

Browser Compatibility

List of Browser Support for this component
Chrome Latest
Firefox Latest
Edge Latest
Safari 5.1+
IE 9+

Resources