Hiding vertical scrollbar of multi-line SELECT in Firefox and Chrome?
<div style="overflow: hidden;"><select style="width: 110% ; border: 0px;">.....
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
- Make the scrollbar just one pixel wide so it doesn't get in the way
- 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