<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;
}