Select box with inline SVG arrow

v0.1a

Select an option

Option 1 Option 2 Option 3 Option 4

Implementing this component

The Markup

				
<form id="form-select">
    <fieldset class="select-box-svg t-neutral">
        <label for="select-box-svg" class="select-box-svg__label">Select an option</label>
        <div class="select-box-svg__inner">
            <select id="select-box-svg" class="select-box-svg__select">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
                <option>Option 4</option>
            </select>
            <svg role="presentation" class="icon icon--arrow" width="62px" height="60px" viewBox="-458 261.7 41.8 38.3">
                <rect x="-458" y="261.4" class="icon__box" width="62" height="60"/>
                <polygon class="icon__caret" points="-432.9,281.4 -437.1,286.4 -441.3,281.4 "/>
            </svg>
        </div>
    </fieldset>
</form>
				
			

The CSS - Theming

				
/* Theming colour information  */

.t-neutral .select-box-svg__inner {
     background-color: #eee;
}
.t-neutral .select-box-svg__inner select option {
    color: #111;
}
.t-neutral .select-box-svg__inner select {
    color: #697070;
}
.t-neutral .select-box-svg__inner select:active,
.t-neutral .select-box-svg__inner select:focus {
    background-color: rgba(249, 241, 155, 0.5);
}
.t-neutral .icon--arrow .icon__box {
   fill:  #222;
}
.t-neutral .icon--arrow .icon__caret {
    fill: #fff;
}
				
			

The CSS - Component

                
/* Component */

.select-box-svg__label {
    display:block;
    margin:1em 0 0.5em;
    color: #555;
}

.select-box-svg__inner {
    border: none;
    border-radius: 5px;
    font-family: Helvetica, 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-svg__inner:hover,
.select-box-svg__inner:focus,
.select-box-svg__inner:active {
    cursor: pointer;
}

.icon--arrow {
    z-index:1;
    position:absolute;
    right:0;
    bottom:0;
    display:block;
    padding:0;

}

.select-box-svg__inner select option {
    display:block;
    line-height:1.5;
    font-size:1em;
    border:none;
}
.select-box-svg__inner select:hover {
    cursor: pointer;
}
.select-box-svg__inner select {
    position:relative;
    z-index:2;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border-color:none;
    background-image: none;
    border: none;
    box-shadow: none;
    font-family: Helvetica, sans-serif;
    font-size: 1em;
    padding: 16px;
    display: block;
    transition: background 0.4s ease;
}
.select-box-svg__label ~ .select-box-svg__inner select {
    width: 115%;
}

          
            

About the component

This is a customized version of the native select element, allowing you to style the initial (unopened) select box. This uses an inline SVG for the appearance of the arrow.

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

Standard control for a select box. Down arrow and up arrow change options.

High contrast mode

This component uses an SVG element for the visual appearance of the select box arrow, the SVG should play nice with high contrast mode.

Cross browser notes

TBD.

Cross device notes

TBD.