Плавающая стрелка Select

$(document).ready(function() { 
  $(".drop .option").click(function() { 
    var val = $(this).attr("data-value"), 
        $drop = $(".drop"), 
        prevActive = $(".drop .option.active").attr("data-value"), 
        options = $(".drop .option").length; 
    $drop.find(".option.active").addClass("mini-hack"); 
    $drop.toggleClass("visible"); 
    $drop.removeClass("withBG"); 
    $(this).css("top"); 
    $drop.toggleClass("opacity"); 
    $(".mini-hack").removeClass("mini-hack"); 
    if ($drop.hasClass("visible")) { 
      setTimeout(function() { 
        $drop.addClass("withBG"); 
      }, 400 + options*100);  
    } 
    triggerAnimation(); 
    if (val !== "placeholder" || prevActive === "placeholder") { 
      $(".drop .option").removeClass("active"); 
      $(this).addClass("active"); 
    }; 
  }); 
   
  function triggerAnimation() { 
    var finalWidth = $(".drop").hasClass("visible") ? 22 : 20; 
    $(".drop").css("width", "24em"); 
    setTimeout(function() { 
      $(".drop").css("width", finalWidth + "em"); 
    }, 400); 
  } 
});

*, *:before, *:after { 
  -webkit-box-sizing: border-box; 
          box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
} 
 
@font-face { 
  font-family: pfs-bold; 
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PFSquareSansPro-Bold.otf"); 
} 
body { 
  background: #35414a; 
} 
 
.drop { 
  width: 20em; 
  margin: 5em auto; 
  font-family: pfs-bold; 
  color: #86919a; 
  text-transform: uppercase; 
  position: relative; 
  -webkit-transition: width 0.5s; 
  transition: width 0.5s; 
  will-change: width; 
} 
.drop .option { 
  padding: 1em; 
  cursor: pointer; 
  background-color: #485761; 
} 
.drop .option:not(.active) { 
  display: none; 
  opacity: 0; 
  -webkit-transform: translateY(-50%); 
          transform: translateY(-50%); 
} 
.drop.visible { 
  -webkit-animation: bounce 1s; 
          animation: bounce 1s; 
  width: 24em; 
} 
.drop.visible:before, .drop.visible:after { 
  border-color: #fff; 
} 
.drop.visible:before { 
  opacity: 0; 
} 
.drop.visible:after { 
  opacity: 1; 
} 
.drop.visible .option { 
  color: #fff; 
  display: block; 
} 
.drop.opacity .option { 
  -webkit-transform: translateZ(0); 
          transform: translateZ(0); 
  opacity: 1; 
} 
.drop.opacity .option:nth-child(0) { 
  -webkit-transition: opacity 0.5s 0s, -webkit-transform 0.5s 0s; 
  transition: opacity 0.5s 0s, -webkit-transform 0.5s 0s; 
  transition: opacity 0.5s 0s, transform 0.5s 0s; 
  transition: opacity 0.5s 0s, transform 0.5s 0s, -webkit-transform 0.5s 0s; 
} 
.drop.opacity .option:nth-child(1) { 
  -webkit-transition: opacity 0.5s 0.1s, -webkit-transform 0.5s 0.1s; 
  transition: opacity 0.5s 0.1s, -webkit-transform 0.5s 0.1s; 
  transition: opacity 0.5s 0.1s, transform 0.5s 0.1s; 
  transition: opacity 0.5s 0.1s, transform 0.5s 0.1s, -webkit-transform 0.5s 0.1s; 
} 
.drop.opacity .option:nth-child(2) { 
  -webkit-transition: opacity 0.5s 0.2s, -webkit-transform 0.5s 0.2s; 
  transition: opacity 0.5s 0.2s, -webkit-transform 0.5s 0.2s; 
  transition: opacity 0.5s 0.2s, transform 0.5s 0.2s; 
  transition: opacity 0.5s 0.2s, transform 0.5s 0.2s, -webkit-transform 0.5s 0.2s; 
} 
.drop.opacity .option:nth-child(3) { 
  -webkit-transition: opacity 0.5s 0.3s, -webkit-transform 0.5s 0.3s; 
  transition: opacity 0.5s 0.3s, -webkit-transform 0.5s 0.3s; 
  transition: opacity 0.5s 0.3s, transform 0.5s 0.3s; 
  transition: opacity 0.5s 0.3s, transform 0.5s 0.3s, -webkit-transform 0.5s 0.3s; 
} 
.drop.opacity .option:nth-child(4) { 
  -webkit-transition: opacity 0.5s 0.4s, -webkit-transform 0.5s 0.4s; 
  transition: opacity 0.5s 0.4s, -webkit-transform 0.5s 0.4s; 
  transition: opacity 0.5s 0.4s, transform 0.5s 0.4s; 
  transition: opacity 0.5s 0.4s, transform 0.5s 0.4s, -webkit-transform 0.5s 0.4s; 
} 
.drop.opacity .option:nth-child(5) { 
  -webkit-transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s; 
  transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s; 
  transition: opacity 0.5s 0.5s, transform 0.5s 0.5s; 
  transition: opacity 0.5s 0.5s, transform 0.5s 0.5s, -webkit-transform 0.5s 0.5s; 
} 
.drop.opacity .option:nth-child(6) { 
  -webkit-transition: opacity 0.5s 0.6s, -webkit-transform 0.5s 0.6s; 
  transition: opacity 0.5s 0.6s, -webkit-transform 0.5s 0.6s; 
  transition: opacity 0.5s 0.6s, transform 0.5s 0.6s; 
  transition: opacity 0.5s 0.6s, transform 0.5s 0.6s, -webkit-transform 0.5s 0.6s; 
} 
.drop.opacity .option:nth-child(7) { 
  -webkit-transition: opacity 0.5s 0.7s, -webkit-transform 0.5s 0.7s; 
  transition: opacity 0.5s 0.7s, -webkit-transform 0.5s 0.7s; 
  transition: opacity 0.5s 0.7s, transform 0.5s 0.7s; 
  transition: opacity 0.5s 0.7s, transform 0.5s 0.7s, -webkit-transform 0.5s 0.7s; 
} 
.drop.opacity .option:nth-child(8) { 
  -webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s; 
  transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s; 
  transition: opacity 0.5s 0.8s, transform 0.5s 0.8s; 
  transition: opacity 0.5s 0.8s, transform 0.5s 0.8s, -webkit-transform 0.5s 0.8s; 
} 
.drop.opacity .option:nth-child(9) { 
  -webkit-transition: opacity 0.5s 0.9s, -webkit-transform 0.5s 0.9s; 
  transition: opacity 0.5s 0.9s, -webkit-transform 0.5s 0.9s; 
  transition: opacity 0.5s 0.9s, transform 0.5s 0.9s; 
  transition: opacity 0.5s 0.9s, transform 0.5s 0.9s, -webkit-transform 0.5s 0.9s; 
} 
.drop.withBG .option { 
  -webkit-transition: background-color 0.1s; 
  transition: background-color 0.1s; 
} 
.drop.withBG .option:not(.placeholder):hover { 
  background-color: #5aafee; 
} 
.drop.withBG .option:not(.placeholder).active { 
  background-color: #5aafee; 
} 
.drop:after, .drop:before { 
  content: ""; 
  position: absolute; 
  top: 1.5em; 
  right: 1em; 
  width: 0.75em; 
  height: 0.75em; 
  border: 0.2em solid #86919a; 
  -webkit-transform: rotate(45deg); 
          transform: rotate(45deg); 
  -webkit-transform-origin: 50% 50%; 
          transform-origin: 50% 50%; 
  -webkit-transition: opacity 0.2s; 
  transition: opacity 0.2s; 
} 
.drop:before { 
  border-left: none; 
  border-top: none; 
  top: 1.2em; 
} 
.drop:after { 
  border-right: none; 
  border-bottom: none; 
  opacity: 0; 
} 
 
.mini-hack { 
  opacity: 0; 
  -webkit-transform: translateY(-50%); 
          transform: translateY(-50%); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="drop"> 
  <div class="option active placeholder" data-value="placeholder"> 
    Choose wisely 
  </div> 
  <div class="option" data-value="wow"> 
    Wow! 
  </div> 
  <div class="option" data-value="drop"> 
    So dropdown! 
  </div> 
  <div class="option" data-value="select"> 
    Very select! 
  </div> 
  <div class="option" data-value="custom"> 
    Much custom! 
  </div> 
  <div class="option" data-value="animation">  
    Such animation! 
  </div> 
</div>