Скрытие вертикальной полосы прокрутки многострочного выбора в Firefox и Chrome?

эта проблема казалась достаточно простой (overflow:hidden, да?) пока я не смог ее решить. У меня есть простой многострочный выбор с определенным размером:

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

MSIE и Opera показывают вертикальную полосу прокрутки только при необходимости, но Firefox и Chrome всегда отображение вертикальной полосы прокрутки в отключенном состоянии.

Я попытался установить overflow, overflow-y и даже overflow-x, но ничего не работает. Есть идеи?

8
firefox google-chrome scrollbar select

7 ответов

вы не можете, по-видимому:http://www.webdeveloper.com/forum/showthread.php?t=154496

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

вот достойная ссылка на многие вещи, которые вы можете сделать с полосы прокрутки webkit. В CSS вы нужны здесь 

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

трюк по существу делает две вещи!--4-->

  1. сделайте полосу прокрутки шириной всего в один пиксель, чтобы она не мешала
  2. установите цвет фона в transprent

Если вы хотите, чтобы это работало только для подмножества выбранных полос прокрутки, вы должны изменить CSS, изменив полосу прокрутки для фиктивного класса

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

а затем используйте этот класс для выбора, который вы хотите изменить. например,

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

вот скрипка, которая показывает " удалено" полоса прокрутки в действии

rememebr он будет работать только с браузерами Webkit!

5

вы можете используя некоторый JavaScript

Не самое лучшее решение, но должно работать :)

1

попробуйте это:

<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>
1

решение от @mon ломается в некоторых случаях (например, внутри ячейки таблицы), хотя это отличное решение. Однако этот похож, но лучше:

скрыть вертикальную полосу прокрутки в <select> элемент, решение с полями

0

единственное, что я могу придумать, это перекрыть полосу прокрутки, разместив изображение или solid DIV с более высоким Z-индексом справа сверху SELECT полоса прокрутки. Но это будет грязный хак.

-1