for example, in the block I replaced the slider itself through a pseudo-class, but nothing has changed:

.filter__checkbox-list { height: 105px; overflow: scroll; overflow-x: hidden; &::-webkit-scrollbar-thumb { background: red; } } 

it was necessary to do so, but will the css data properties work for the block?

enter image description here

  • yeah for some reason it works exactly if you specify the width of the scroll itself, apparently it is necessary) as an answer, publish your comment)) - stiv

2 answers 2

It is necessary to add another width of the scrolbar

 &::-webkit-scrollbar 

Example

 .filter__checkbox-list { height: 105px; overflow-y: auto; overflow-x: hidden; border: 1px solid #ccc; max-width: 300px; } .filter__checkbox-list label { display: block; padding: 5px; } /* Width */ .filter__checkbox-list::-webkit-scrollbar { width: 6px; } /* Thumb */ .filter__checkbox-list::-webkit-scrollbar-thumb { background: red; } 
 <div class="filter__checkbox-list"> <label><input type="checkbox"> List 1 </label> <label><input type="checkbox"> List 2 </label> <label><input type="checkbox"> List 3 </label> <label><input type="checkbox"> List 4 </label> <label><input type="checkbox"> List 5 </label> <label><input type="checkbox"> List 6 </label> <label><input type="checkbox"> List 7 </label> <label><input type="checkbox"> List 8 </label> </div> 

    Without defining styles for :: - webkit-scrollbar will not work. Try this

     .filter__checkbox-list { height: 105px; overflow: scroll; overflow-x: hidden; } .filter__checkbox-list::-webkit-scrollbar { background-color: #ddd; border-radius: 8px; width: 7px; overflow: hidden; } .filter__checkbox-list::-webkit-scrollbar-thumb { background-color: #1955A8; border-radius: 8px; } 
    • & :: - webkit-scrollbar-thumb (preprocessor used) = .filter__checkbox-list :: - webkit-scrollbar-thumb - these styles are equivalent. - soledar10
    • I know, but there was no Less / Sass at hand. If necessary, I will correct under a preprocessor. - Essle Jaxcate