Set custom arrow for HTML Select element with TailwindCSS

index.html

<select id="language-selector" class="flex p-3 px-12 bg-[95%] border-2 appearance-none border-violet">
  <option selected> Deutsch </option>
  <option> English </option>
  <option> Français </option>
</select>

style.css

select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}