JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<label class="custom-select">
    <select name="" id="">
        <option value="">Some option</option>
        <option value="">Some option</option>
        <option value="">Some option</option>
    </select>
</label>

CSS

label.custom-select {
  position: relative;
  display: inline-block;
}

label.custom-select:after {
    content: "\e600";
    font-family: 'ThriveLeads7';
    font-size: 24px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    line-height: 25px;
    padding: 0 3px;
    height: 26px;
    background: #f5f5f5;
    color: #333333;
    pointer-events: none;
    border: 1px solid #cccccc;
}
label.custom-select select {
    display: inline-block;
    border: 1px solid #cccccc;
    padding: 3px 20px 3px 5px;
    margin: 0;
    font: inherit;
    outline: none; /* remove focus ring from Webkit */
    line-height: 1.2;
    background: #fff;
}