Как изменить дизайн выпадающего списка? [закрыт]

$('.select').on('click', '.placeholder', function() { 
  $(this).closest('.select').toggleClass('drop'); 
}).on('click', '.option', function() { 
  let parent = $(this).closest('.select'), 
      selectVal = $(this).data('val') ? $(this).data('val') : ($(this).index() + 1), 
      labeled = $(this).find('.labeled').text(); 
  parent.find('.option.selected').removeClass('selected'); 
  $(this).addClass('selected'); 
  parent.find('.placeholder').text(labeled); 
  let parentID = '#for_' + parent.attr('id'); 
  $(parentID).val(selectVal); 
});

@import url('https://use.fontawesome.com/releases/v5.7.2/css/all.css'); 
.select { 
  display: inline-block; 
  width: 100%; 
  max-width: 200px; 
  height: 40px; 
  position: relative; 
} 
 
.select .placeholder { 
  display: block; 
  width: 100%; 
  height: 40px; 
  line-height: 40px; 
  background: #fff; 
  box-shadow: 0 0 2px 1px #aaa; 
  border-radius: 4px; 
  color: cornflowerblue; 
  padding: 0 10px; 
  font-weight: bold; 
  box-sizing: border-box; 
  cursor: pointer; 
} 
 
.select .placeholder::before { 
  content: '\f0d7'; 
  display: inline-block; 
  float: right; 
  font-family: "Font Awesome 5 Free"; 
  font-style: normal; 
  font-variant: normal; 
  text-rendering: auto; 
  font-size: 20px; 
  font-weight: 900; 
} 
 
.select.drop>.placeholder::before { 
  content: '\f0d8'; 
} 
 
.select .option-list { 
  display: none; 
  width: 100%; 
  max-height: 150px; 
  border-radius: 4px; 
  box-shadow: 0 0 2px 1px #aaa; 
  background: #fff; 
  box-sizing: border-box; 
  position: absolute; 
  top: 55px; 
} 
 
.select .option-list::before, 
.select .option-list::after { 
  content: ''; 
  display: block; 
  width: 0; 
  height: 0; 
  position: absolute; 
  pointer-events: none; 
} 
 
.select .option-list::before { 
  border: 10px solid transparent; 
  border-bottom-color: #aaa; 
  top: -20px; 
  right: 10px; 
  filter: blur(1px); 
} 
 
.select .option-list::after { 
  border: 9.5px solid transparent; 
  border-bottom-color: #fff; 
  top: -17px; 
  right: 11.5px; 
} 
 
.select .option { 
  display: block; 
  width: 100%; 
  padding: 10px; 
  color: cornflowerblue; 
  box-sizing: border-box; 
  cursor: pointer; 
} 
 
.select .option:not(:last-child) { 
  border-bottom: 1px solid #ddd; 
} 
 
.select .option>i { 
  display: inline-block; 
  float: right; 
  font-size: 20px; 
} 
 
.select .option:first-child { 
  border-radius: 3px 3px 0 0; 
} 
 
.select .option:last-child { 
  border-radius: 0 0 3px 3px; 
} 
 
.select .option.selected { 
  background: cornflowerblue; 
  color: #fff; 
} 
 
.select.drop>.option-list { 
  display: block; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div id="select_1" class="select"> 
  <div class="placeholder">Transport</div> 
  <div class="option-list"> 
    <div class="option" data-val="mail"> 
      <i class="fas fa-envelope"></i> 
      <span class="labeled">Classic mail</span> 
    </div> 
    <div class="option" data-val="truck"> 
      <i class="fas fa-truck"></i> 
      <span class="labeled">UPS Devilery</span> 
    </div> 
    <div class="option" data-val="jet"> 
      <i class="fas fa-plane"></i> 
      <span class="labeled">Private jet</span> 
    </div> 
  </div> 
</div> 
 
<input id="for_select_1" type="text">