JSFiddle - React, Tailwind, and code Playground

by Leonardo Santos

HTML

<script src="https://cdn.jsdelivr.net/jquery.selectric/1.9.0/jquery.selectric.min.js"></script>
<button>Refresh</button>
<br>
<select>
    <option value="">Select with few options</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
</select>

SCSS

body {
    font-family: sans-serif;
}

$main-color: #DDD;
$secondary-color: #BBB;
$bg-color: #F8F8F8;
$text-color: #444;
$height: 40px;
$spacing: 10px;
$border-width: 1px;
$inner-height: $height - ($border-width * 2);

.selectric-wrapper {
  position: relative;
  cursor: pointer;
  width: 300px;
}

.selectric-responsive {
  width: 100%;
}

.selectric {
  border: $border-width solid $main-color;
  background: $bg-color;
  position: relative;

  .label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 $inner-height 0 $spacing;
    font-size: 12px;
    line-height: $inner-height;
    color: $text-color;
    height: $inner-height;
  }

  .button {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: $inner-height;
    height: $inner-height;
    color: $secondary-color;
    text-align: center;
    font: 0/0 a;
    *font: 20px/#{$inner-height} Lucida Sans Unicode, Arial Unicode MS, Arial;

    &:after {
      content: " ";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      width: 0;
      height: 0;
      border: 4px solid transparent;
      border-top-color: $secondary-color;
      border-bottom: none;
    }
  }
}

.selectric-hover .selectric {
  border-color: darken($main-color, 10%);

  .button {
    color: darken($secondary-color, 10%);

    &:after {
      border-top-color: darken($secondary-color, 10%);
    }
  }
}

.selectric-open {
  z-index: 9999;

  .selectric {
    border-color: darken($main-color, 10%);
  }

  .selectric-items {
    display: block;
  }
}

.selectric-disabled {
  filter: alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  user-select: none;
}

.selectric-hide-select {
  position: relative;
  overflow: hidden;
  width: 0;
  height: 0;

  select {
    position: absolute;
    left: -100%;
    display: none;
  }
}

.selectric-input {
  position: absolute !important;
  top: 0 !important;
 ...

JavaScript

$('select').selectric({
    customClass: {
        camelCase: false
    }
});

$('button').on('click', function () {
    $('select').append('<option>' + (Math.random() * 100 | 0) + '</option>').selectric('refresh');
});