Skip to content

WordPress Component Library
10up Engineering

Custom Select Form

The custom select menu is some help 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.

To use this component you will also need to download the arrow SVG graphic that is referenced in the SCSS file.


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

SCSS Download SCSS

/** --------------------------------------------------------------------

	Custom Select Element Pattern

--------------------------------------------------------------------- */

$select--bg:                              #fff !default;
$select--font-family:                     sans-serif !default;
$select--color:                           #000 !default;
$select--border:                          1px solid #ccc !default;
$select--padding:                         0 28px 0 8px !default;
$select--radius:                          2px !default;
$select--height:                          36px !default;

$select__arrow--bg-img:                   url('icon-arrow-down.svg') !default;
$select__arrow--bg-size:                  13px auto !default;
$select__arrow--width:                    28px !default;

// States
$select--focus-state:                   inset 0 0 0 1px blue !default;
$select--focus-moz:                     0 0 0 #000 !default;

$select--focus-ring--text-shadow:       0 0 0 #000 !default;

$select__option--padding:               2px 4px !default;
$select__option--hover-bs:              inset 0 0 200px blue !default;

// Namespace, if you want it (update the HTML too)
$ns: '';


// \9 IE hacks in place to work around the fact that IE easily
// let you hide the default browser select down arrow.

// Drop Down Selection
.#{$ns}custom-select {
	background: $select--bg;
	border: $select--border;
	border-radius: $select--radius;
	height: $select--height;
	overflow: hidden; // ie fix pt1
	position: relative;

	&:after {
		background-color: transparent;
		background-image: $select__arrow--bg-img;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: $select__arrow--bg-size;
		content: '';
		height: 100%;
		pointer-events: none; // don't block mouse clicks
		position: absolute;
		right: 0;
		speak: none;
		top: 0;
		width: $select__arrow--width;

	select {
		-webkit-appearance: textarea;
			 -moz-appearance: none;
		appearance: none;
		background: none;
		border: 0;
		color: $select--color;
		font-family: $select--font-family;
		height: 100%;
		margin: 0;
		padding: $select--padding;
		width: 100%;
		width: 110% \9; // ie fix pt2
		z-index: 2;

		&:focus {
			box-shadow: $select--focus-state;
			outline: transparent;

		// Remove the default select down arrow in IE10+
		&::-ms-expand {
			display: none;

	// FireFox has their own special focusring because
	// they really wanted to make styling this element
	// consistently a huge pain in the...
	// we're not actually getting rid of it,
	// but rather by setting the color to transparent,
	// it'll make the outline transparent too.
	// the text-shadow then 'refills' the transparent
	// text to make it look like it never went away.
	select:-moz-focusring {
		color: transparent;
		text-shadow: $select--focus-ring--text-shadow;

	option {
		border: 0;
		padding: $select__option--padding;

Browser Compatibility

Feature Chrome Firefox Internet Explorer Safari
Basic Support Latest Latest 9+ 5.1+