Een alternatief form-element: select

Eerder schreef ik al over hoe een checkbox op een andere manier kan worden vormgegeven in je browser.
Nu wil ik het hebben over de selectbox, de draak van de formulieren.

De native selecbox is erg nuttig. Mobiele browsers geven een fijn alternatief voor het dropdownlijstje, dus het is ook nog eens erg handig in gebruik.
De layoutaanpassing die ik gebruik heeft geen implicaties op deze standaard functionaliteit. Oh en er komt ook nog eens geen javascript aan te pas. Een CSS-only selectbox-aanpassing dus.

In deze post ga ik er vanuit dat je al enig kennis van CSS hebt.
Laten we eenvoudig beginnen:
Dit is dus een normale selectbox:

en dit is de selectbox die je kan maken na het lezen van dit artikel:

Ja, hoe doe ik dat toch he?

Laten we simpel beginnen. Je hebt dus de code van de selectbox:

<select name="my-select" class="input-field">
   <option value="1">stoer ding</option>
   <option value="2">heel stoer ding</option>
</select>

Omdat we geen pseudo-elementen kunnen gebruiken op een selectbox, zijn we genoodzaakt om een tag toe te voegen.
Om die tag dan ook nuttig te laten zijn voegen we de label-tag toe.

<label class="alt-select"></label>

Wat dus samen dit maakt:

<label class="alt-select">
   <select name="my-select" class="input-field">
      <option value="1">stoer ding</option>
      <option value="2">heel stoer ding</option>
   </select>
</label>

alternative-select-0
Ok, je ziet nog niets veranderen. Dat klopt. Om de selectbox mooi vorm te geven moeten we gebruik maken van CSS.
Ik gebruik zelf geen preprocessor zoals SASS of LESS, daar geef ik dus ook geen voorbeeld van.

Voor het maken van de alternatieve css-only selectbox heb je maar 3 selectors nodig:

/* wrapper voor de selectbox */
.alt-select { }

/* hiermee gaan we het pijltje maken */
.alt-select:after { }

/* de echte selectbox */
.alt-select select { }

Laten we beginnen met de wrapper. Die moet eruit gaan zien als een selectbox.

.alt-select {
/* een alternatieve 1 pixel brede rand. */
    border: 1px solid #f30;
/* en een border radius om te laten zien dat het echt anders is */
    border-radius: .5em;
/* we willen eventueel een width en height zetten en hij moet een element (select) wrappen. 
   daarom kies ik voor deze property */
    display: inline-block;
/* omdat we de pijl van de selectbox absoluut gaan positioneren, zetten we hier een de property
   position met value relative. Dat zorgt er voor dat het pijltje absoluut gepositioneerd wordt aan
   de hand van deze tag */
    position: relative;
/* we willen een beetje ruim zijn met het pijltje, dus dat moet wel worden afgeknipt */
    overflow: hidden;
}

alternative-select-1
Ok, de basis staat nu. Het ziet er alleen nog niet lekker uit. Om het erger te maken gaan we nu het pijltje toevoegen.
Dit doen we met een psuedo-element. Een leuk en handig ding wat er voor zorgt dat we maar 1 extra tag nodig hebben.

.alt-select:after {
/* allereerst moet de oude pijl verborgen worden. */
    background: #fff;
/* nu willen we een ander pijltje. Ik vind deze wel leuk. Het is een UTF-8 karakter wat je met veel fonts gewoon kunt gebruiken */
    content: '▼';
/* omdat ik ook een oranje border heb, wil ik dat het pijltje ook oranje is */
    color: #f30;
/* het pijltje hoeft niet megagroot te zijn */
    font-size: .6em;
/* de selectbox moet de originele grootte krijgen, dus spontaan breder dan het origineel.
   Daarom positioneer ik het pijltje absoluut zodat ik zelf kan bepalen waar 'ie moet komen te staan
*/
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
/* belangrijk is dat het pijltje zelf niet in de weg moet zitten. Als je er op klikt moet dat genegeerd worden en het element onder het pijltje moet de klik dus krijgen. */
    pointer-events: none;
/* even netjes centreren */
    text-align: center;
/* en een nette breedte geven */
    width: 2.3em;
}

alternative-select-2
En als laatste is de selectbox zelf aan de beurt. We moeten voornamelijk de standaard styling uitzetten.

.alt-select select {
/* Allereerst willen we dat de rand weg is, die is nu veel te dik en wordt al overgenomen door 
   de parent */
    border: none;
/* verder willen we dat zoveel mogelijk van de standaard styling wordt uitgeschakeld. 
   Helemaal webkit heeft de neiging om lekker een eigen layout te gebruiken voor form-elementen. */
    -webkit-appearance: none;
    -moz-appearance: none;
/* mocht het pijltje redelijk smal zijn, dan zorgt onderstaande code ervoor dat het pijltje 
   alsnog wegvalt. Dit werkt niet in alle browsers op dit moment, maar zal in de toekomst 
   waarschijnlijk wel zo zijn. Zodra het overal werkt kan je de achtergrondkleur van het pijltje
   weghalen.*/
    text-indent: .01px;
    text-overflow: "";
/* dit is een toegankelijkheidspuntje. Er zijn mensen die het lelijk vinden dat een geselecteerd 
   veld een rand heeft. Anderen vinden dit juist prettig omdat je dan eenvoudig met het 
   toetsenbord een waarde kan kiezen. */
    outline: none;
}
/* en speciaal voor webkit browsers met hun gekke selectboxes is onderstaande nodig */
@supports (-webkit-appearance:none) {
    .alt-select select {
        padding-right: 1.1em;
    }
}

Op deze manier heb je de basisstyling veranderd. Het element werkt net als vroeger, maar ziet er een stukje vriendelijker uit voor je formulier.

Het is naar mijn weten (nog) niet mogelijk om ook het lijstje wat uit de selectbox komt rollen aan te passen (Op de kleur na). Als je dat wilt doen zal je de selectbox moeten omzetten naar een li, maar wel met javascript. Maar dat is nu net het punt van deze post, het hoeft niet en zorgt ook nog voor een betere gebruiksvriendelijkheid.

Bedankt voor het lezen. Mocht je vragen of opmerkingen hebben, laat het me weten in de comments.

Speak Your Mind

*