Select2 demo

HTML

<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
<select id="example">
    <option value="JAN">January</option>
    <option value="FEB">February</option>
</select>

CSS

/* This makes the custom arrow rotate. */
.select2-container--open .select2-selection__arrow {
    transform: rotate(180deg) !important;
}

/* visual css */
.select2 {
  width: 200px !important;
  height: 20px !important;
  }
/* arrow container */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 35px;
    top: 50%;
    right: 0px;
    width: 35px;
    margin-top: -15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
}

/*the arrow itself */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    background-image: url(https://cdn4.iconfinder.com/data/icons/user-interface-174/32/UIF-76-512.png);
    background-color: transparent;
    background-size: contain;
    border: none !important;
    height: 20px !important;
    width: 20px !important;
    margin: auto !important;
    top: auto !important;
    left: auto !important;
}

JavaScript

$('#example').select2({
    placeholder: 'Select a month'
});