JSFiddle - React, Tailwind, and code Playground

by Dean Pugh

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="wrapper">
  <select>
    <option value="default">Default</option>
    <option value="default">Option 1</option>
    <option value="default">Option 2</option>
    <option value="default">Option 3</option>
  </select>

</div>

CSS

.wrapper {
  position: relative;
  display: inline-block;
}

.wrapper:before {
  /*pointer-events: none;*/
  content: "\f0d7";
  font-size: 2em;
  font-family: "FontAwesome";
  line-height: 12px;
  color: #fff;
  position: absolute;
  right: 0;
  top: 40%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

select {
  border: 2px solid blue;
  font-size: 18px;
  background: black;
  color: white;
  padding: 10px;
  width: 200px;
  -webkit-appearance: none;
}