JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<div  class="roleSelector" id="roleSelectorObj"><select><option value="[Markets].[EMEA]">EMEA</option><option value="[Markets].[NA]">NA</option></select></div>

CSS

select{
   font-size: 0.75rem;
    line-height: 0.94rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    padding-left: 2px;
    padding-right: 13px;
    border: 1px solid #999;
    vertical-align: middle;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='black'><path d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z'/></svg>") no-repeat right #fff;
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: 100% 25%;
}