There is a select (plugin select2 is used for it). How to style the scrollbar inside it so that the styles are not applied to the whole page?

I tried to use the plugin SimpleScrollbar for these purposes, but failed to achieve the desired result.

$(document).ready(function() { $(".js-example-basic-single").select2(); }); $('body').on('select2:open', function () { var el = document.querySelector('.select2-results__options'); SimpleScrollbar.initEl(el); }); 
 .select2-container { width: 200px !important; } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <link href="http://buzinas.imtqy.com/simple-scrollbar/simple-scrollbar.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <script src="http://buzinas.imtqy.com/simple-scrollbar/simple-scrollbar.min.js"></script> <select class="js-example-basic-single"> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> </select>

    2 answers 2

    Cross-browser compatibility is only lame, but as an option I can offer this:
    PS: Given that only one select-select2 per page. If more, then they will all have such a scroll.

     $(document).ready(function() { $(".js-example-basic-single").select2(); }); 
     .select2-container { width: 200px !important; margin-left: 15px } .sss { width: 200px !important; max-height: 50px; overflow: scroll; margin-left: 15px } div { width: 100px; max-height: 150px; overflow: scroll; float: left; } .select2-results__options::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #F5F5F5; border-radius: 10px; } .select2-results__options::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } .select2-results__options::-webkit-scrollbar-thumb { border-radius: 10px; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148))); } .mul::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color: #F5F5F5; border-radius: 10px; } .mul::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } .mul::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #FFF; background-image: -webkit-linear-gradient(top, #99f5fc 0%, #ffa8f9 50%, #9fb8ef 51%, #2ac0ed 100%); } 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <link href="http://buzinas.imtqy.com/simple-scrollbar/simple-scrollbar.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <script src="http://buzinas.imtqy.com/simple-scrollbar/simple-scrollbar.min.js"></script> <select class="js-example-basic-single"> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> </select> <select class="sss"> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> </select> <div class='mul'> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> </div>

      Well, for example, using the SlimScroll plugin. Download and documentation - http://rocha.la/jQuery-slimScroll

       $(document).ready(function() { $(".js-example-basic-single").select2(); $(".js-example-basic-single").on('select2:open', function () { $('.select2-results__options').slimScroll(); }); }); 
       .select2-container { width: 200px !important; } 
       <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.js"></script> <select class="js-example-basic-single"> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> <option>Alabama</option> <option>Wyoming</option> </select>