Hide vertical scrollbar in <select> element

I know this thread is somewhat old, but there are a lot of really hacky answers on here, so I'd like to provide something that is a lot simpler and a lot cleaner:

select {
    overflow-y: auto;
}

As you can see in this fiddle, this solution provides you with flexibility if you don't know the exact number of select options you are going to have. It hides the scrollbar in the case that you don't need it without hiding possible extra option elements in the other case. Don't do all this hacky overlapping div stuff. It just makes for unreadable markup.

No, you can't control the look of a select box in such detail.

A select box is usually displayed as a dropdown list, but there is nothing that says that it always has to be displayed that way. How it is displayed depends on the system, and on some mobile phones for example you don't get a dropdown at all, but a selector that covers most or all of the screen.

If you want to control how your form elements look in such detail, you have to make your own form controls out of regular HTML elements (or find someone else who has already done that).

This is where we appreciate all the power of CSS3:

.bloc {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  border: solid grey 1px;
}

.bloc select {
  padding: 10px;
  margin: -5px -20px -5px -5px;
}

<div class="bloc">
  <select name="year" size="5">
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012" SELECTED>2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
  </select>
</div>

Fiddle