Customize Select

by denvdmj

HTML

<select>
  <option value="sel-1">option-1</option>
  <option value="sel-2">option-2</option>
  <option value="sel-3">option-3</option>
  <option value="sel-4">option-4</option>
  <option value="sel-5">option-5</option>
  <option value="sel-6">option-6</option>
  <option value="sel-7">option-7</option>
  <option value="sel-8">option-8</option>
  <option value="sel-9">option-9</option>
  <option value="sel-10">option-10</option>
</select>

CSS

:root {
  background-color: #fff;
  color: #000;
}
input[type=range],
input[type=range]::-webkit-slider-thumb,
input[type=text],
select {
  -webkit-appearance: none;
  background: 0 0;
  outline: 0;
  width: 100%;
  height: 2.3125rem;
  padding: .5rem;
  margin: 0
}


select {
  border-radius: .125rem;
  border: .0625rem solid #ccc;
  background: url("data:image/svg+xml;,<svg xmlns='http://www.w3.org/2000/svg' x='12' width='24' height='3' viewBox='0 0 6 3'><path d='M6 0L3 3 0 0'/></svg>") 100% 50% no-repeat;
  line-height: 1;
  font: inherit;
  font-size: .875rem;
  color: rgba(0, 0, 0, .75);
}