JSFiddle - React, Tailwind, and code Playground

by Tom Randolph

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="main">
    <div class="field">
        <span class="dropdown">
            <select>
                <option>1</option>
                <option>2</option>
            </select>
        </span>
    </div>
</div>

SCSS

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video{
    margin: 0;
    padding: 0;
    border: 0;
}

ol,
ul,
menu{
    list-style: none;
}

*,
*:before,
*:after{
    box-sizing: inherit;
    font-size: inherit;
}

html{
    box-sizing: border-box;
}

.main{
    width: 300px;
    line-height: 20px;
}

.field{
    position: relative;
}

.field span.dropdown{
    select{
        // Turn off everything that's default
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 0;

        // Custom design
        background-color: rgba( 234, 234, 234, 1 );

        width: 100%;
        padding: 10px 16px;
        padding-right: ( 14px + 24px + 10px );

        color: rgba( 97, 97, 97, 1 );
        font-size: 16px;

        &:focus,
        &:active{
            color: rgba( 0, 0, 0, 1 );
            background-color: rgba( 213, 213, 213, 1 );
        }
    }

    &:after{
        color: rgba( 97, 97, 97, 1 );
        line-height: 16px;
        font:{
            size: 24px;
            family: "FontAwesome";
        }
        content: "\f0d7"; // http://fontawesome.io/icon/caret-down/

        border-left: 1px solid rgba( 151, 151, 151, 1 );
        padding: 14px;

        position: absolute;
        right: 0;
        top: 0; // CHROMEBUG
        height: 100%; // CHROMEBUG

        cursor: default;
        pointer-events: none;
    }
}