<div class="custom-select-content-wrapper">
    <div class="custom-select-form-wrapper">
      
      <h1 class="custom-select-heading">Custom select box</h1>
      <form action="#">
        <fieldset>
          <select name="sources" id="sources" class="custom-select sources" data-placeholder="Select box">
            <option value="profile">Lorem ipsum dolor sit amet</option>
            <option value="word"> Consectetur adipisicing elit</option>
            <option value="hashtag">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae unde voluptate cumque dolores quod veritatis repudiandae laborum eaque, corrupti architecto.</option>
          </select>
        </fieldset>
      </form>

    </div>
  </div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

/***PAGE STYLE (BEGIN)***/
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #efa602;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

.custom-select-content-wrapper {
  width: 100%;
  height: 100vh;
  background: #ffd700;
  background: -moz-linear-gradient(top,  #ffd700 0%, #efa602 100%);
  background: -webkit-linear-gradient(top,  #ffd700 0%,#efa602 100%);
  background: linear-gradient(to bottom,  #ffd700 0%,#efa602 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd700', endColorstr='#efa602',GradientType=0 );
}

.custom-select-form-wrapper {
  position: relative;
  top: 50px;
  margin: 0 auto;
  padding: 0 2.5%;
  width: 32.5%;
  max-width: 650px;
  min-width: 400px;
  border-radius: 10px;
  border: 2px solid rgba(159,107,4,0.45);
  background-color: rgba(255,255,255,0.45);
  box-shadow: 0 10px 20px #bb9241;
}

.custom-select-heading {  
  margin: 50px 0;
  font-size: 3em;
  color: #fff;
  text-align: center;
  text-transform: uppercase;  
  text-shadow: 0 2px 1px #a9742b;
}
/***PAGE STYLE (END)***/

/***CUSTOM SELECT STYLE (BEGIN)***/
fieldset {
  border: none;
}

input[type="text"],
select,
textarea {
  width: 100%;
}

.custom-select-wrapper {
  position: relative;
  margin-bottom: 90px;
  display: block;
}

.custom-select-wrapper select {
  display: none;
  overflow: hidden;
  width: 100%;
}

.custom-select {
  position: relative;
  display: block; 
}

.custom-select-trigger {
  position: relative; 
  padding: 0;
  display: block;
  overflow: hidden;
  width: 100%;  
  border: 2px solid #dbb729;
  border-radius: 10px;
  background-color: #fff;
  font-size: 1.875em;
  line-height: 160%;
  color: #3e345c;
  cursor: pointer;
}

.custom-select-trigger:after {
  position: absolute;
  display: block;
  content: '';
  width: 10px;
  height: 10px;
  top: 50%;
  right: 20px;
  margin-top: -0.13636363em;
  border-bottom: 1px solid #84570a;
  border-right: 1px solid #84570a;
  -webkit-transform: rotate(45deg) translateY(-50%);
  -ms-transform: rotate(45deg) translateY(-50%);
  transform: rotate(45deg) translateY(-50%);
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
}

.custom-select.opened .custom-select-trigger:after {
  margin-top: 0.13636363em;
  -webkit-transform: rotate(-135deg) translateY(-50%);
  -ms-transform: rotate(-135deg) translateY(-50%);
  transform: rotate(-135deg) translateY(-50%);
}

.custom-select-trigger-text {
  position: relative;
  top: 0.4em; 
  padding: 0 45px 0 20px;
  display: inline-block;
  overflow: hidden;
  height: 57px; 
  color: #84570a;
}

.custom-options {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  margin: 0;
  display: none;
  min-width: 100%;  
  border: 1px solid #ececec;
  border-radius: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  -webkit-transition: all .4s ease-in-out;  
  opacity: 0;
  z-index: 10;
  transition: all .4s ease-in-out;
}

.custom-options:before {
  position: absolute;
  display: block;
  content: '';
  top: -0.22727272em;
  right: 25px;
  width: 7px;
  height: 7px;
  margin-bottom: -0.18181818em;
  border-top: 1px solid #ececec;
  border-left: 1px solid #ececec;
  background: #fff;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.option-hover:before {
  background: #f9f9f9;
}

.custom-option {
  position: relative;
  display: block;
  padding: 10px;
  border-bottom: 1px solid #ececec;
  font-size: 1em;
  color: #333333;
  cursor: pointer;
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.custom-option:last-of-type {
  border-bottom: 0;
  border-radius: 10px;
}

.custom-option.selection:hover,
.custom-option:hover {
  background: #fff9e6;
}
/***CUSTOM SELECT STYLE (END)***/

$(function(){

  var $customSelect = $( '.custom-select' );
  var $resetButton = $( '#resetButton' );


  $customSelect.each(function() {
    var classes = $( this ).attr( 'class' );
    var id = $( this ).attr( 'id' );
    var name = $( this ).attr( 'name' );

    var template =  '<div class="' + classes + '">';
    template += '<span class="custom-select-trigger">';
    template += '<span class="custom-select-trigger-text">' + $( this ).data( 'placeholder' ) + '</span>';
    template += '</span>';
    template += '<div class="custom-options">';

    $(this).find( 'option' ).each( function() {
      template += '<span class="custom-option" data-value="' + $( this ).attr( 'value' ) + '">' + $( this ).html() + '</span>';
    });

    template += '</div></div>';
    
    var customSelectWrapper = $( '<div class="custom-select-wrapper"></div>' );
    customSelectWrapper.css({
      '-webkit-user-select': 'none',
      '-moz-user-select': 'none',
      '-ms-user-select': 'none',
      'user-select': 'none'
    });

    $( this ).wrap( customSelectWrapper );
    $( this ).after( template );
  });


  $( document ).on( 'click', function( e ){
    var eTarget = e.target;

    if( !$( eTarget ).closest( '.custom-select-wrapper' ).hasClass( 'custom-select-wrapper' ) ) {
      $( '.custom-select' ).removeClass( 'opened' );
      customOptionsClosed();
    }
  });


  $( '.custom-select-trigger' ).on( 'click', function() {
    $( this ).parents( '.custom-select' ).toggleClass( 'opened' );

    var timer;
    if( $( this ).parents( '.custom-select' ).hasClass( 'opened' ) ){
      clearTimeout( timer );

      $( this )
        .parents( '.custom-select' )
        .find( '.custom-options' )
        .stop()
        .css('display', 'block')
        .animate({
          'opacity': '1',
          'margin-top': '15px'
        },100 );
    }

    else{
      customOptionsClosed();
    }

  });


  $( '.custom-option' ).on( 'click', function() {
    $( this ).parents( '.custom-select-wrapper' ).find( 'select' ).val( $( this ).data( 'value' ) );
    $( this ).parents( '.custom-options' ).find( '.custom-option' ).removeClass( 'selection' );
    $( this ).addClass( 'selection' );
    $( this ).parents( '.custom-select' ).removeClass( 'opened' );    
    $( this ).parents( '.custom-select' ).find( '.custom-select-trigger-text' ).text( $( this ).text() );
    customOptionsClosed();
  });


  $resetButton.on('click', function() {
    $( '.custom-select-trigger-text' ).text( $customSelect.data( 'placeholder' ) );
  });


  function customOptionsClosed() {
    $('.custom-options')
      .stop()
      .animate({
        opacity: 0,
        'margin-top': '0'
      },100 );

    t = setTimeout(function(){
      $('.custom-options').css('display', 'none');
    }, 500 );
  }

});