.wrapper.typo
  | This is a custom
  div.list
    span.placeholder select
    
    ul.list__ul
      each item in ['select', 'lorem', 'ipsum', 'dolor', 'sit', 'amet']
        li: a(href="")= item
  
  //
    .select
      select.typo
        - each item in ['lorem', 'ipsum', 'dolor', 'sit', 'amet']
          option.typo #{item}
    
View Compiled
@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');

$dark: #555;
$color--primary: hsla(269, 100%, 50%, 1);

body {}

.typo {
  font-size: 60px;
  font-weight: 700;
  font-family: 'Playfair Display', serif;    
  color: #585858;
  text-decoration: none;
  option {
    font-size: 30px;
  }  
}

.transition {
   transition: all .4s ease-in-out;
}


body {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.wrapper {
  font-size: 60px;
  margin-top: -10%
}

.list {
  display: inline-block;
  position: relative;
  //border: 1px solid red;
  margin-left: 6px;
  ul {
    text-align: left;
    position: absolute;
    padding: 0;
    top: 0;
    left: 0;
    display: none;
    .active {
      display: block;
    }
    
  }
  li {
    list-style:none;
    &:first-child a {
      color: desaturate($color--primary, 50%);
    }
  }
  a {
    @extend .typo;
    transition: all .4s;
    color: $color--primary;
    position: relative;
    &:after {
      position: absolute;
      content: '';
      height: 5px;
      width: 0;
      left: 0;
      background: lighten($color--primary, 20%);
      bottom: 0;
      transition: all .4s ease-out;
    }
    &:hover {
      cursor: pointer;
      color: lighten($color--primary, 20%);
      &:after {
        width: 100%;
      }
    }    
  }
}

select {
  display: inline;  
  border: 0;
  width: auto;
  margin-left: 10px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-bottom: 2px solid $dark;
  color: $color--primary;
  transition: all .4s ease-in-out;
  
  &:hover {
    cursor: pointer;    
  }
  
  option {
    border: 0;
    border-bottom: 1px solid $dark;
    padding: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
}

.placeholder {
  //visibility: hidden;
  //position: fixed;
  border-bottom: 4px solid;
  cursor: pointer;
  &:hover {
    color: lighten($dark, 20%);
  }
}



View Compiled
console.clear();

var el = {};

$('.placeholder').on('click', function (ev) {
  $('.placeholder').css('opacity', '0');
  $('.list__ul').toggle();
});

 $('.list__ul a').on('click', function (ev) {
   ev.preventDefault();
   var index = $(this).parent().index();
   
   $('.placeholder').text( $(this).text() ).css('opacity', '1');
   
   console.log($('.list__ul').find('li').eq(index).html());
   
   $('.list__ul').find('li').eq(index).prependTo('.list__ul');
   $('.list__ul').toggle();   
   
 });


$('select').on('change', function (e) {
  
  // Set text on placeholder hidden element
  $('.placeholder').text(this.value);
  
  // Animate select width as placeholder
  $(this).animate({width: $('.placeholder').width() + 'px' });
  
});

Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js