JSFiddle - React, Tailwind, and code Playground

by ismett

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<label for="">Select your language</label>
<select class="selectpicker show-tick">
  <option> English</option>
  <option> Hrvatski</option>
</select>

CSS

.caret {
  background: url('../images/down-bold.png') no-repeat;
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  top: 10px;
  right: -2px;
  border-top: 0px dashed;
  border-top: 0px solid;
  border-right: 0px solid transparent;
  border-left: 0px solid transparent;
}

.caret-set {
  background: url('../images/menu-top.jpg') no-repeat;
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  top: 10px;
  right: -2px;
  border-top: 0px dashed;
  border-top: 0px solid;
  border-right: 0px solid transparent;
  border-left: 0px solid transparent;
}

JavaScript

$(document).ready(function() {

   $("select.show-tick").click(function() {
     $(".bs-caret span").toogleClass("caret-set");
   });

 });