JSFiddle - React, Tailwind, and code Playground

by MeltingDog

HTML

SVG I want to use: <svg xmlns='http://www.w3.org/2000/svg' width='15.826' height='9.413' viewBox='0 0 15.826 9.413'><path id='Path_100' data-name='Path 100' d='M175.428,127l6.5,7,6.5-7' transform='translate(-174.015 -125.584)' fill='none' stroke='#000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>

<br/> <br/>
Should work here but deosnt <br/>
<select class="select1">
<option>Test 1</option>
<option>Test 2</option>
</select>

<br/> <br/>
Yet other SVGs work, eg: <br/>
<select class="select2">
<option>Test 1</option>
<option>Test 2</option>
</select>

CSS

.select1 {
  width: 50%;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15.826' height='9.413' viewBox='0 0 15.826 9.413'><path id='Path_100' data-name='Path 100' d='M175.428,127l6.5,7,6.5-7' transform='translate(-174.015 -125.584)' fill='none' stroke='#000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 98%;
  background-position-y: 50%;
}

.select2 {
  width: 50%;
  -webkit-appearance: none;
  -moz-appearance: none;
  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>");
  background-repeat: no-repeat;
  background-position-x: 98%;
  background-position-y: 50%;
}