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.

HTML

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

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+

Resources