Styling Select Inputs
The following are some notes on styling forms that I would like to write down rather than always pulling up old code to find.
The Select Input
Consider the following markup:
<div class="input-field select-wrap col l6 m12 s12">
<select id="preferredFloorplan" name="preferredFloorplan">
<option value="" disabled selected>Preferred floorplan</option>
<option value="Studio">Studio</option>
<option value="Alcove Studio">Alcove Studio</option>
<option value="Terrace Unit">Terrace Unit</option>
<option value="One Bedroom">One Bedroom</option>
<option value="One Bedroom Home Office">One Bedroom Home Office</option>
<option value="Two Bedroom One Bath">Two Bedroom One Bath</option>
<option value="Two Bedroom Two Bath">Two Bedroom Two Bath</option>
</select>
</div>
It is fairly common to want to style this differently than the browser would like, which becomes a bit of a pain.
Chrome will natively, and stubbornly round the corners on this input as well as provide it’s own arrow.
To reverse this behavior we do the following:
select {
padding-left: 0.75rem;
font-size: 1rem;
-webkit-appearance: none;
-webkit-border-radius: 0px;
border-radius: 0;
}
This gives us a hair of padding to the left and the -webkit
selectors will remove the default styling. But now we’ve lost our down arrow.
We can use a pseudo-selector to do this but we are going to need to use our wrapper to do so since pseudo-selectors are not allowed on the select
element itself.
.select-wrap::after {
content: '';
position: absolute;
right: .75rem;
top: 1.25rem;
height: 0;
width: 0;
border-top: 8px solid $color-med-grey;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
pointer-events: none;
z-index: 9;
}