chromium select (dropdown) scrollbar cannot be change/inspect the height/items and look

Question

I have a select in my html with 24 options of hours data:

#hoursDD {
  height: 34px;
  display: inline-block;
  vertical-align: top;
  width: 140px;
  font-size: 14px;
}

<select id="hoursDD"><option value="00:00">00:00</option><option value="01:00">01:00</option><option value="02:00">02:00</option><option value="03:00">03:00</option><option value="04:00">04:00</option><option value="05:00">05:00</option><option value="06:00">06:00</option><option value="07:00">07:00</option><option value="08:00">08:00</option><option value="09:00">09:00</option><option value="10:00">10:00</option><option value="11:00">11:00</option><option value="12:00">12:00</option><option value="13:00">13:00</option><option value="14:00">14:00</option><option value="15:00">15:00</option><option value="16:00">16:00</option><option value="17:00">17:00</option><option value="18:00">18:00</option><option value="19:00">19:00</option><option value="20:00">20:00</option><option value="21:00">21:00</option><option value="22:00">22:00</option><option value="23:00">23:00</option></select>

The problem is when I click the dropdown I see only some of the select options and not all of them and I cannot control the height os the scroll and the number of items it shows or it's style (look). I see only the options from 00:00 to 19:00. It shows exactly 20 elements by default even though I have 24 elements. I cannot scroll to the rest of the items or style the select builtin control.

I'm running the HTML under chromium/windows 10.

The CSS is as follows:

#hoursDD {
    height: 34px;
    display: inline-block;
    vertical-align: top;
    width: 140px;
    font-size: 14px;
}

It is like the drop-down scroll has a max-height/height property.

Is this some user-agent CSS issue? or WebKit CSS issue?

(As the image show I can pick only from 01:00 until 19:00 and I don't see the options 20:00 etc...)

The overflow settings are as follows:

Can you see overflow:visible in chrome in inspect element for select? — Rahul S, Apr 20 '17 at 11:40
yet no scroll even coming in chromium? in my chrome am in windows its working. — Rahul S, Apr 20 '17 at 11:54
found some answer to the issue here:http://stackoverflow.com/questions/24115769/vertical-scroll-in-select-html — Tal Avissar, Apr 20 '17 at 12:33

score 0 · Answer 1 · answered Apr 21 '17 at 11:18

OK, I found the answer.

Some elements simply can't be styled using CSS (like select).

These include all advanced user interface widgets such as range, color, or date controls as well as all the dropdown widgets, including, and elements. The browser has full control of the scrollbar.There are no scroll rules that you can style in.

The browser determines when to initiate a scrollbar depending on a number of options and the direction the dropdown takes with given viewport space.

There are ways + hacks + alternatives to change the default look and feel.

May you question why bother styling the select anyway?

You might argue that each browser's default elements are well known to the user and shouldn’t be messed with. That’s a valid point if you can get the select to marry visually with the rest of your site design – or simply just don’t care about the aesthetics.

However, this is not so good if the default elements look terrible next to the gorgeous design you’ve spent so many painstaking hours/weeks / months putting together – even worse if you have a client that demands consistent styling across the site.

Example solutions can be found in the links below:

Another good example with 2 demos can be found here:

chromium select (dropdown) scrollbar cannot be change/inspect the height/items and look

1 Answers1