Скрытие вертикальной полосы прокрутки многострочного SELECT в Firefox и Chrome? - PullRequest
Новая
       13

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

8 голосов
/ 04 июля 2010

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

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

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

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

Ответы [ 7 ]

7 голосов
/ 14 апреля 2013 
<div style="overflow: hidden;">
<select style="width: 110% ; border: 0px;">
.....
5 голосов
/ 23 июня 2013

Это довольно старая тема сейчас, но я думаю, что есть другие, которые сталкиваются с ней в поисках ответа на тот же вопрос, что и я.Для браузеров Webkit существует очень простое решение, благодаря тому, что они (Chrome и Safari) позволяют стилизовать полосу прокрутки.

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

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

Фокус в основном состоит в двух вещах

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

Если вы хотите, чтобы это работало только для подмножества отдельных полос прокрутки, вы должны изменить 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>

Вот скрипка, которая показывает «удаленную» полосу прокрутки в действии

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

2 голосов
/ 04 июля 2010

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

1 голос
/ 23 мая 2012

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

<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 голос
/ 10 декабря 2010

Вы можете, , используя немного JavaScript

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

0 голосов
/ 03 ноября 2013

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

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

0 голосов
/ 04 июля 2010

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

...