Huesos
Style
Guide

Repositoire

GitHub

Preview

Select

Native HTML

There are many shortcomings on <select> styling and the UX is broken (to say the least) , so we recommend using the js-enhanced solution.

Still, if you want to use the native HTML solution, a basic syling is provided: vertical rhythm is preserved, borders are added, sizing is always 100% width.

In order to make the arrows appear, you will need to wrap the whole <select> element on a .select-wrapper parent (this is because HTML form elements won’t accept pseudo-elements).

<!-- Wrap it on a .select-wrapper to add the arrow -->
<div class="form-item select-wrapper">
    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</div>

JS-enhanced

When [data-selectr] is applied directly on the element, it uses Selectr for a leaner UI, search box, tag-like behavior on [multiple], etc…

Selectr’s css has been adapted to Huesos styling and respects vertical rhythm and _config.scss values.

Example

<h4>Normal select</h4>
<div class="form-item select-wrapper">
    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</div>
<div class="form-item">
    <select data-selectr>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</div>
<h4>Multiple select</h4>
<div class="form-item">
    <select multiple>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
        <option value="fiat">Fiat</option>
        <option value="seat">Seat</option>
        <option value="renault">Renault</option>
        <option value="opel">Opel</option>
    </select>
</div>
<div class="form-item">
    <select multiple data-selectr>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
        <option value="fiat">Fiat</option>
        <option value="seat">Seat</option>
        <option value="renault">Renault</option>
        <option value="opel">Opel</option>
    </select>
</div>
<h4>Optgroup select</h4>
<div class="form-item select-wrapper">
    <select>
        <optgroup label="Expensive cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
        </optgroup>
        <optgroup label="Unaffordable cars">
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </optgroup>
    </select>
</div>
<div class="form-item">
    <select data-selectr>
        <optgroup label="Expensive cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
        </optgroup>
        <optgroup label="Unaffordable cars">
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </optgroup>
    </select>
</div>

Assets

  • Filesystem Path: src/components/forms/select/_select.scss
  • Size: 515 Bytes 
  • select {
	@include form-reset-general();
	@include form-border($input-border-strategy);
	-webkit-appearance: none;
	appearance:none;
	width:100%;

	&[multiple] {
		vertical-align: top;
	}

	option {
		min-height: 1em; // Overrides default behavior on Chrome that breaks vrhythm
		padding:ritmo(0.5) 0; // We can't use line-height so we size it using ritmo lines...
	}
}

.select-wrapper {
	position:relative;
	@include arrow('down', 0.25rem, darken-color($input-border-color), 50%, ritmo($input-padding-lines) );

}