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>
<select class="selectpicker show-tick"> Select your
   <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");
   });
    
 });