Good day! There is such a problem: how to add a horizontal scroll bar in the drop-down select? What select do I need? Give advice on how to implement this, preferably without plug-ins. Thank!

enter image description here

"Without plug-ins" means that you write the script with your hands, and not use a ready-made plug-in.

    2 answers 2

    To make the scroll bar smaller than a thumb, in the property: -webkit-scrollbar-track it is necessary to prescribe a white frame

    background-color: rgba(50, 50, 50, 0.25); border-radius: 10px; border: 4px solid #FFFFFF; border-radius: 15px;

    and you will be happy

      The list of standard selects cannot be affected, since It is rendered not by the browser, but by the operating system. But you can use js-plugin for select, for example, select2 . In it you can, among other things, stylize a scrollbar.

      For example:

       .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar { height: 10px; width: 10px; } .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb { background-clip: padding-box; background-color: rgba(50, 50, 50, 0.25); border-radius: 10px; border: 2px solid transparent; } .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb:hover { background-color: rgba(50, 50, 50, 0.5); }
      • Thank you very much, everything turned out. Can you please tell me how to reduce the track? That he was in line, as in the screenshot - KovalevEE