Hiding vertical scrollbar of multi-line SELECT in Firefox and Chrome?

Question

This problem seemed quite simple (overflow:hidden, right?) until I couldn't solve it. I have a simple multi-line SELECT with defined size:

<select size="10" name="elements">
... 
</select>

MSIE and Opera show vertical scrollbar only when needed, but Firefox and Chrome always display vertical scrollbar in disabled state.

I tried setting overflow, overflow-y, and even overflow-x, but nothing works. Any ideas?

Answer 1

<div style="overflow: hidden;">
<select style="width: 110% ; border: 0px;">
.....

Answer 2

This is a rather old thread now but I imagine that there are others who run into it in quest of an answer to the very same question just as I did. For Webkit browsers there is a very simple solution courtesy of the fact that they (Chrome and Safari) allow the scrollbar to be styled.

Here is a decent reference to many of the things you can do with webkit scrollbars. The CSS you need here is

select::-webkit-scrollbar{width:1px;background-color:transparent}

The trick is essentially doing two things

1. Make the scrollbar just one pixel wide so it doesn't get in the way
2. Set its background color to transprent

If you want this to work for only a subset of select scrollbars you should change the CSS by altering the scrollbar for a dummy class

.subsel::-webkit-scrollbar{width:1px;background-color:transparent}

and then use that class for the selects you want to thus modify. e.g.

<select class='subsel' id='selOne' size='4'>
 <option value='1'>Option One</option>
 <option value='2'>Option Two</option>
</select>

Here is a fiddle that shows the "removed" scrollbar in action

rememebr it will only work with Webkit browsers!