Hiding vertical scrollbar of multi-line SELECT in Firefox and Chrome?_问答_开发者

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

开发者 https://www.devze.com 2023-01-05 10:34 出处：网络

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

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 sta开发者_如何学运维te.

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

<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

rememebr it will only work with Webkit browsers!

You can't, apparently: http://www.webdeveloper.com/forum/showthread.php?t=154496

In Chrome, overflow: hidden works fine.

In Firefox you can currently use scrollbar-width: none; to hide the scrollbar. This may one day become a standard, but as of 2020, only implemented by Mozilla.

You can, using some JavaScript

Not the best solution, but should work :)

Try this:

<html>
<head>
<style>
div.border {
    margin-right: 0px;
    border-style:solid;
        overflow:hidden;
}
select.hiddenscroll {
    margin-right: -20px;
    margin-top: -3px;
    margin-bottom: -3px;
    padding-right: -20px;
        overflow:hidden;
}
</style>
</head>
<body>
    <table>
    <tr><td>
    <div class="border" style="overflow:hidden;">
        <select size="5" multiple="multiple" class="hiddenscroll" scrolling="no" seamless="seamless">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
          <option>Option 4</option>
          <option>Option 5</option>  
        </select> 
    </div>
    <table>
    </tr></td>
</body>
</html>

The only thing I can think of is to overlap the scrollbar by positioning an image or solid DIV with a higher z-index right on top the SELECT scrollbar. But this would be an ugly hack.

The solution from @mon breaks in some occasions (e.g. inside table cell), though it is a great solution. However this one is similar but better:

Hide vertical scrollbar in <select> element, solution with margins