JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div id="styled-select">
      <select>
        <option>Value 1</option>
        <option>Value 2</option>
        <option>Value 3</option>
        <option>Value 4</option>
        <option>Value 5</option>
      </select>
    </div>

CSS

body {
      margin: 20px;
    }
    #styled-select {
      width: 240px;
      height: 34px;
      overflow: hidden;
      background: lightblue;
      border: 1px solid #ccc;
    }
    #styled-select select {
      background: transparent;
      width: 264px;
      padding: 5px;
      font-size: 16px;
      border: 0;
      height: 34px;
      display: inline-block;
      -webkit-appearance: none;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
    }
    
    #styled-select option {
      background-color: #f00;
      border-top: #fff solid 1px !important;
    }
    .lt-ie8 #styled-select {
      width: auto;
      height: auto;
      overflow: auto;
      background: none;
      border: 0;
    }
    .lt-ie8 #styled-select select {
      background: auto;
      width: 240px;
    }