Custom Select

Custom Select - HTML

<div class="__select_field">
  <div class="__select">
    <p class="__selected" data-selected="all-locations">All Locations</p>
    <div class="__select--list">
      <div>
        <p data-value="all-locations">All Locations</p>
        <p data-value="location-1">Location 1</p>
        <p data-value="location-2">Location 2</p>
        <p data-value="location-3">Location 3</p>
        <p data-value="location-4">Location 4</p>
        <p data-value="location-5">Location 5</p>
        <p data-value="location-6">Location 6</p>
        <p data-value="location-7">Location 7</p>
        <p data-value="location-7">Location 7</p>
        <p data-value="location-8">Location 8</p>
        <p data-value="location-9">Location 9</p>
        <p data-value="location-10">Location 10</p>
        <p data-value="location-11">Location 11</p>
        <p data-value="location-12">Location 12</p>
      </div>
    </div>
  </div>
  <i class="fas fa-chevron-down"></i>
</div>

Custom Select - JS

$( '.__select .__selected' ).on( 'click', function() {
    var parent = $( this ).parent();

    if( parent.hasClass( '__open' ) ) {
      parent.removeClass( '__open' );
    } else {
      parent.addClass( '__open' );
    }
  } );

  $( '.__select--list p' ).on( 'click', function() {
    var parent = $( this ).closest( '.__select' );
    
    $( '.__select--list p' ).removeClass( '__list_selected' );
    $( this ).addClass( '__list_selected' );

    $( '.__selected', parent ).attr( 'data-selected', $( this ).data( 'value' ) ).text( $( this ).text() );

    if( parent.hasClass( '__open' ) ) {
      parent.removeClass( '__open' );
    } else {
      parent.addClass( '__open' );
    }
  } );

Custom Select - SCSS

.__select_field {
  position: relative;
  .__select {
    position: relative;
    z-index: 1;
    width: auto;
    color: #606060;
    background: transparent;
    min-width: 200px;
    font-weight: 300;
    cursor: pointer;
    outline: none;
    padding: 0;
    border: 0;
    * {
      -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
    }
    &.__open {
      .__select--list {
        display: block;
      }
    }
    p {
      padding: 8px 30px 8px 10px;
      border: 1px solid #606060;
      margin-bottom: 0;
    }
    &--list {
      display: none;
      position: absolute;
      top: 42px;
      width: 100%;
      background: #f2f2f2;
      div {
        border: 1px solid #606060;
        max-height: 300px;
        overflow: auto;
      }
      p {
        border-top: 0;
        border-left: 0;
        border-right: 0;
        -webkit-transition: all .3s;
        transition: all .3s;
        &:last-child {
          border-bottom: 0;
        }
        &.__list_selected,
        &:hover {
          background: #e6e6e6;
        }
      }
    }
    i {
      position: absolute;
      top: 15px;
      right: 10px;
      color: #606060;
      font-size: 12px;
    }
  }
}