JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://yastatic.net/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/js/jquery.fs.selecter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
<select name="select" class="form-control">
<option value="82" >82</option>
<option value="83" >83</option>
<option value="84" >84</option>
<option value="85" >85</option>
<option value="86" >86</option>
<option value="87" >87</option>
<option value="88" >88</option>
<option value="89" >89</option>
<option value="90" >90</option>
<option value="91" >91</option>
<option value="90" >92</option>
<option value="91" >93</option>
<option value="90" >94</option>
<option value="91" >95</option>
<option value="90" >96</option>
<option value="91" >97</option>
</select>
<div style="height:250px;width:100%"> </div>
CSS
/*
* Selecter v3.2.3 - 2014-10-24 https://jsfiddle.net/ishurgaya/msd17gjh/1/#
* A jQuery plugin for replacing default select elements. Part of the Formstone Library.
* http://formstone.it/selecter/
*
* Copyright 2014 Ben Plum; MIT Licensed
*/
.selecter {
position: relative;
display: block;
margin: 10px 0;
z-index: 1;
max-width: 100%;
}
.selecter:focus {
box-shadow: none;
outline: none;
}
.selecter,
.selecter * {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
.selecter,
.selecter *,
.selecter *:before,
.selecter *:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.selecter-element {
width: 100%;
height: 100%;
position: absolute;
left: 0;
opacity: 0;
z-index: -1;
}
.selecter-element,
.selecter-element:focus {
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
}
.no-opacity .selecter-element {
left: -999999px;
}
.selecter-selected {
position: relative;
background: #ffffff;
border: 1px solid #cccccc;
color: #222222;
cursor: pointer;
display: block;
font-size: 13px;
margin: 0;
overflow: hidden;
padding: 10px 15px;
text-overflow: clip;
z-index: 2;
border-radius: 3px;
}
.selecter-selected:after {
height: 15px;
width: auto;
position: absolute;
top: 0;
right: 15px;
bottom: 0;
content: url(http://images.vfl.ru/ii/1510480610/d332ac99/19385516.png);
display: block;
margin: auto 0;
}
.selecter.open .selecter-selected::after {
-webkit-transform: rotate(180deg); /* разворот элемента для разных бразуеров*/
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.no-touch .selecter-selected:hover {
color: #333333;
}
.no-touch .selecter.disabled .selecter-selected:hover {
color: #cccccc;
}
.selecter-options {
width:...
JavaScript
$(document).ready(function(){
$("select").selecter();
$(".selecter-options").niceScroll({cursorborder:"",cursorcolor:"#f79149",boxzoom:false});
});