De stijl van een selectbox wordt voornamelijk door de browser bepaald. Hoe ziet het pijltje er uit? Hoe ziet de rand er uit? Hierdoor lijkt een selectbox in iedere browser een eigen uiterlijk te hebben en past deze vaak net niet bij de stijl van de website.
Het is met CSS al goed mogelijk om kleur, rand en schaduw te beïnvloeden, maar met de uitrol van steeds meer CSS features is het nu ook mogelijk om default pijl weg te poetsen. Dit kan met -webkist-appearance en en -moz-appearance, door deze op ‘none’ te zetten heb je een oplossing voor zowel Firefox (moz) als Chrome en Safari (webkit). Voor Internet Explorer is nog een kleine toevoeging nodig, zoals in de code hier onder te zien.
Omdat er geen before en after psuedo elementen toegestaan zijn op select, is er nog een wrapper nodig waarin een after wordt gedefinieerd die de nieuwe pijl hanteert. Dit kan door een afbeelding te gebruiken, maar ook door een font te gebruiken.
In het voorbeeld heb ik een groen vierkant blokje geplaatst. Deze zou normaal gesproken de click opvangen maar door het gebruiken van pointer-events ‘none’ worden er geen clicks op dat element geregistreerd.