<span class="select-wrapper">
  <select name="select" id="select">
    <option value="1">Lorem, ipsum. Nihil, voluptatibus</option>
    <option value="2">Nihil, voluptatibus.</option>
    <option value="3">Soluta, rerum!</option>
    <option value="4">Voluptatum, quod!</option>
    <option value="5">Sit, quasi!</option>
  </select>
  <svg height="16" width="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 512C114.625 512 0 397.375 0 256S114.625 0 256 0s256 114.625 256 256-114.625 256-256 256zm0-448C149.969 64 64 149.969 64 256s85.969 192 192 192c106.03 0 192-85.969 192-192S362.031 64 256 64zm0 320c-70.688 0-128-57.312-128-128s57.312-128 128-128 128 57.312 128 128-57.312 128-128 128z"/></svg>
</span>

body {
  padding: 40px;
}

.select-wrapper select {
  -webkit-appearance: none;
  padding: 8px 30px 8px 8px;
  border: 1px solid #ccc;
  border-radius: 7px;
}

.select-wrapper {
  position: relative;
}

.select-wrapper svg {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  fill: lightblue;
  pointer-events: none;
  transition: fill 0.5s;
}

.select-wrapper select:focus + svg {
  fill: tomato;
}