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.

Classes

.custom-select Wrapping class for the component.

Browser Compatibility

Chrome Latest
Firefox Latest
Edge Latest
Safari 5.1+
IE 9+

Resources