JSFiddle - React, Tailwind, and code Playground

by Erik Woods

HTML

<form>
    <select>
        <optgroup>
            <option selected>30 years</option>
            <option>25 years</option>
            <option>20 years</option>
            <option>15 years</option>
            <option>10 years</option>
        </optgroup>
    </select>
</form>

SCSS

$blue: #2081bf;
$gray: #aaa;
$white: #fff;

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: $white url(https://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat;
    border: 2px solid $gray;
    border-radius: 5px;
    color: $blue;
    font-size: 16px;
    font-weight: bold;
    outline: 0;
    padding: 0.25em 0.5em;
    width: 150px;

    &:focus {
        border-color: $blue;
    }

    optgroup {
        background: $white;
        border: 2px solid $blue;
    }

    option {
        font-weight: bold;
    }

    option:checked {
        box-shadow: 0 0 10px 100px $blue inset;
    }
}