<div class="select-wrapper">
<select>
<option>Athletics</option>
<option>Basketball</option>
<option>Diving</option>
<option>Gymnastics</option>
</select>
</div>
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: -webkit-linear-gradient(left, #ffbfbf 0%, #ffe6bf 13%, #fffcbf 27%, #c6ffbf 41%, #bffffd 57%, #bfc7ff 71%, #e8bfff 86%, #ffbfd7 100%);
background: linear-gradient(to right, #ffbfbf 0%, #ffe6bf 13%, #fffcbf 27%, #c6ffbf 41%, #bffffd 57%, #bfc7ff 71%, #e8bfff 86%, #ffbfd7 100%);
border-radius: 0;
border: 2px solid darkslategrey;
cursor: pointer;
font-size: 1.2em;
padding: 0.25em 1em 0.25em 0.25em;
}
.select-wrapper {
display: inline-block;
position: relative;
}
.select-wrapper:after {
content: '';
width: 0;
position: absolute;
right: 7px;
top: 50%;
margin-top: -3px;
border-width: 6px 4px;
border-style: solid;
pointer-events: none;
border-color: darkslategrey transparent transparent transparent;
}