JSFiddle - React, Tailwind, and code Playground

by Luckypouet

HTML

<div class="field">
  <label for="toto">Label</label>
  <select name="" id="toto">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
    <option value="4">Value 4</option>
    <option value="5">Value 5</option>   
  </select>
 </div>

SCSS

.field{
  position: relative;
}
select{
  padding:20px 10px 10px 40px;
  color:green;
  font-weight:bold;
  -webkit-appearance: none;
}
option{
  padding:0;
  background:#FFC;
}
label{
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  padding:0 10px 10px 40px;
    pointer-events:none;
  &:before{
    content:'';
    position: absolute;
    width:30px;
    height:30px;
    background:red;
    top:5px;
    left:5px;
  }
}