How to edit a dropdown scrollbar with CSS? - html

Question

I am working on a dropdown menu and am having difficulty adjusting the scrollbar when the menu is clicked. I have tried targeting everything but I can't seem to get it to work. (I set the width to 20px so I can easily tell if it has adjusted the scrollbar). I am using Google Chrome. I'm sure it's a simple fix that I'm missing. Thank you for your time.
select::-webkit-scrollbar {
width: 20px;
background-color: #cccccc;
}
<div class="dropdown-container">
<select class="dropdown">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
<option value="11">Eleven</option>
<option value="12">Twelve</option>
<option value="13">Thirteen</option>
<option value="14">Fourteen</option>
<option value="15">Fifteen</option>
<option value="16">Sixteen</option>
<option value="17">Seventeen</option>
<option value="18">Eighteen</option>
<option value="19">Nineteen</option>
<option value="20">Twenty</option>
</select>
</div>

Answer 1

I would add a size to the select, then the bar shows up and your css should work. You just need to pick how many you want to show up by default.
Also check out this page for more options https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
<div class = "dropdown-container">
<select class="dropdown" size="5">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
<option value="11">Eleven</option>
<option value="12">Twelve</option>
<option value="13">Thirteen</option>
<option value="14">Fourteen</option>
<option value="15">Fifteen</option>
<option value="16">Sixteen</option>
<option value="17">Seventeen</option>
<option value="18">Eighteen</option>
<option value="19">Nineteen</option>
<option value="20">Twenty</option>
</select>
</div>
select::-webkit-scrollbar {
width: 20px;
background-color:#cccccc;
}