Select box

v0.1a

Custom select

Option 1 Option 2 Option 3 Option 4

Implementing this component

The Markup

				
    <form id="form-select" class="t-neutral">
        <fieldset class="select-box">
            <label class="select-box__label" for="select-box">Custom select</label>
            <div class="select-box__inner">
                <select id="select-box" class="select-box__select">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                    <option>Option 4</option>
                </select>
            </div>
        </fieldset>
    </form>

			

The CSS: Theming

				
/*
 * Theming
/*

.t-neutral .select-box__inner {
    background: $c-select-box-background-color url("../img/arrow_down.svg") no-repeat 97% 50%;
    border: 1px solid #2a1244;
}
.no-svg .t-neutral .select-box__inner {
    background-image: url("../img/arrow_down.png");
}
.t-neutral .select-box__inner select option {
    color: #111;
}
.t-neutral .select-box__inner select {
    color: #697070;
}
.t-neutral .select-box__inner select:active,
.t-neutral .select-box__inner select:focus {
    background-color: rgba(249, 241, 155, 0.5);
}

				
			

The CSS: Component

				
 .select-box__label {
    display:block;
    margin:1em 0;
}

.select-box__inner {
    border-radius: 5px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1em;
    line-height: 1em;
    margin: 0;
    overflow: hidden;
    position: relative;
    transition: background-color 0.4s ease-in-out;
    width: 100%;
}
.select-box__inner:hover,
.select-box__inner:focus,
.select-box__inner:active {
    cursor: pointer;
}

.select-box__inner select option {
    padding:0.5em;
    line-height:1.5;
    font-size:1em;
}
.select-box__inner select:hover {
    cursor: pointer;
}
.select-box__inner select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    font-family: Helvetica, sans-serif;
    font-size: 1em;
    padding: 1em;
    transition: background 0.4s ease;
    width: 115%;
}

The CSS: Supporting High Contrast

	
	/*
	High contrast mode on PC disables background images,
	since this example uses a background image
	to replace a perceived affordance, we need to restore it if
	high contrast mode is enabled.
	Fortunately for windows 8 users,
	we have a media query available to detect the high contrast mode
	unfortunately, it only works in IE.
	You'll need a script to help you detect high contrast mode otherwise.
    */

@media screen and (-ms-high-contrast: active) {
    .select-box__inner select {
         width: 100%;
    }
}
@media screen and (-ms-high-contrast: black-on-white) {
 .select-box__inner select {
         width: 100%;
    }
}
 @media screen and (-ms-high-contrast: white-on-black) {
  .select-box__inner select {
         width: 100%;
    }
}
//requires a script to detect a change
.high-contrast-mode .select-box__inner select {
    width: 100%;
}

				
			

About the component

This is a customized version of the native select element, allowing you to style the initial (unopened) select box.

Screen Readers

This select box behaves exactly like an unstyled select box would.

JAWS

Announces the label, and announces any change to the select box selected option.

NVDA

Announces the label, and announces any change to the select box selected option.

Apple Voiceover

Announces the label, but does not announce any change.

Keyboard control and focus

Standard control for a select box. Down arrow and up arrow change options. Focus color is set and customizable.

High Contrast

Requires a class, or media query to deal with high contrast mode, the ‘caret’ or down arrow icon is a background-image, so in high contrast mode will be made invisible. In high contrast mode we'll need to make the width of the select 100% to restore the initial state.

Inputs

Nothing special has been done to enhance input modes.

Cross browser notes

TBD.

Cross device notes

TBD.