JSFiddle - React, Tailwind, and code Playground

by johnniebenson

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<div class="headerDropdown">
  <select id="mainnavigation">
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
    <option value="mb">Mercedes Benz</option>
  </select>
  <i class="caret"></i>
</div>

CSS

.headerDropdown {
	border-radius: 6px;
	border: 2px solid #d4d4d4;
	height: 34px;
  position: relative;
}

.headerDropdown select {
	height: 34px;
	line-height: 34px;
    padding-left: 10px;
    padding-right: 5px;
    margin-right: 20px;
    font-size: 16px;
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
    width: 100%;
    background: white;
    text-indent: 0.01px;
    text-overflow: "";
    transition: 0.2s;
}

.headerDropdown select::-ms-expand {
    display: none;
}

.headerDropdown select::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.headerDropdown .caret {
  display: block;
  background: url("http://enyojs.com/enyo-2.5.1/lib/moonstone/images/caret-black-small-up-icon.png") no-repeat;
  position: absolute;
  right: 5px;
  top: 2px;
  width: 29px;
  height: 29px;
}

.headerDropdown .rotateCaret {
    animation-name: rotateCaret;
    animation-duration: .5s;
    animation-fill-mode: forwards;
}

@keyframes rotateCaret {
  0% {
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
  }  
}

JavaScript

$("#mainnavigation").on("click", function() {
	$(this).parent().find(".caret").toggleClass("rotateCaret");
});