your textMy Question is very simple. I want to make the scrollbar button which move the option displayed upward or downward. I want to make the button bigger than now.
I tried :
#select-box::-webkit-scrollbar {
width: 40px;
}
#select-box::-webkit-scrollbar-thumb {
background: #666;
}
#select-box::-webkit-scrollbar-track {
background: #ddd;
}
#select-box::-webkit-scrollbar-button {
background-color: #fff;
}<div>
<select id="select-box">
<option value="1">1111111111111111111</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>Another CSS code works. But Only '-webkit-scrollbar-button' CSS selector not applied for select tag.
How can I apply my custom style for the button?
Additionally, I want to show only five options at once when user click the select box even if there are more options than 5. How can I do that? It looks like that there is no attribute for <select\> tag which behave as I want. I've already know there is 'size' attribute. But, It shows 5 options without clicking select box when size=5. I want the size of select box is 1 before clicking, after click then, the size become 5. How can I do that?
