JSFiddle - React, Tailwind, and code Playground

by eshellborn

HTML

<div class="styled-select">
	<select class="the-select">
  <optgroup label="TECHNICIANS">
    <option>Joe Smith</option>
    <option>Joe White</option>
  </optgroup>
  <optgroup label="PRODUCERS">
    <option>Jane Black</option>
    <option>Cindy Gray</option>
  </optgroup>
</select>
</div>

CSS

.styled-select {
	width: 342px;
   height: 30px;
   overflow: hidden;
   background: url("/img/selectarrow.png") no-repeat right;
   border: none;
   opacity: 0.8;
   background-color: #999999;
}

.styled-select select {
   background: transparent;
   width: 342px;
   padding-bottom: 10px;
   padding-left: 10px;
   padding-top: 5px;
   font-size: 16px;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   font-weight: 200;
    font-family: "lato", sans-serif;
    font-size: 18px;
}


.styled-select select:focus {
	outline: none;
}