JSFiddle - React, Tailwind, and code Playground

by magikMaker

HTML

<div class="svg">testing</div>

<select name="" id="">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

CSS

bodyxx {
    background: transparent;
    background-attachment:fixed;
    /*
    background-image: url(
    "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='170px' height='50px'><text x='85' y='30' style='fill:white; text-anchor: middle' font-size='16'>▼</text></svg>");
    */
        background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24px' width='24px'><text x='0' y='16' fill='red' font-size='16'>▼</text></svg>");

}

div,
select {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: right center;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16px' width='16px'><text x='0' y='16' fill='red' font-size='16'>▼</text></svg>");
    border: 0;
    border-radius: 0;
    outline: 0;
    
    
/* temp */
    background-color: pink;
    height: 24px;
    margin-bottom: 1rem;
    width: 100px;
}
/*
<svg height="512px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M98.9,184.7l1.8,2.1l136,156.5c4.6,5.3,11.5,8.6,19.2,8.6c7.7,0,14.6-3.4,19.2-8.6L411,187.1l2.3-2.6  c1.7-2.5,2.7-5.5,2.7-8.7c0-8.7-7.4-15.8-16.6-15.8v0H112.6v0c-9.2,0-16.6,7.1-16.6,15.8C96,179.1,97.1,182.2,98.9,184.7z"/></svg>
*/