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

Привет, у меня есть поле выбора с несколькими вариантами, и мне нужно скрыть вертикальную полосу прокрутки, возможно ли это?

<select name="sCat" multiple="true">
<!-- My Option Here -->
</select>

Okey, но как тогда я могу добиться эффекта, когда я могу выбрать элемент из списка с идентификатором, а затем использовать jQuery для управления этими функциями id.click? Какой элемент я должен использовать?

Ответ 1

Вот где мы ценим всю мощь CSS3:

.bloc {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  border: solid grey 1px;
}

.bloc select {
  padding: 10px;
  margin: -5px -20px -5px -5px;
}

<div class="bloc">
  <select name="year" size="5">
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012" SELECTED>2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
  </select>
</div>

Ответ 2

Я знаю, что эта ветка несколько старая, но здесь есть много действительно хриплых ответов, поэтому я хотел бы предоставить что-то гораздо более простое и много более чистое:

select {
    overflow-y: auto;
}

Как вы можете видеть в этой скрипте, это решение предоставляет вам гибкость, если вы не знаете точного количества вариантов выбора, которые у вас есть. Он скрывает полосу прокрутки в том случае, если она вам не нужна, не скрывая в этом случае дополнительные элементы опций. Не делайте этого хакерского наложения div. Это просто делает для нечитаемой разметки.

Ответ 3

Нет, вы не можете контролировать внешний вид окна выбора так подробно.

Поле выбора обычно отображается как раскрывающийся список, но нет ничего, что говорит о том, что он всегда должен отображаться таким образом. Как он отображается, зависит от системы, а на некоторых мобильных телефонах, например, вы не получаете раскрывающийся список вообще, а селектор, который охватывает большинство или весь экран.

Если вы хотите контролировать, как ваши элементы формы выглядят так подробно, вы должны сделать свои собственные элементы управления формами из обычных HTML-элементов (или найти кого-то еще, кто уже это сделал).

Ответ 4

Вы можете использовать <div> для покрытия полосы прокрутки, если вы действительно хотите, чтобы она исчезла.
Хотя он не будет работать на IE6, современные браузеры позволят вам поставить <div> поверх него.

Ответ 5

Только Chrome (и, возможно, другие веб-браузеры):

/* you probably want to specify the size if you're going to disable the scrollbar */
select[size]::-webkit-scrollbar {
	display: none;
}

<select size=4>
  <option>Mango</option>
  <option>Peach</option>
  <option>Orange</option>
  <option>Banana</option>
</select>

Ответ 6

мой кросс-браузер .no-scroll snippet:

.no-scroll::-webkit-scrollbar {display:none;}
.no-scroll::-moz-scrollbar {display:none;}
.no-scroll::-o-scrollbar {display:none;}
.no-scroll::-google-ms-scrollbar {display:none;}
.no-scroll::-khtml-scrollbar {display:none;}

<select class="no-scroll" multiple="true">
	<option value="2010" >2010</option>
	<option value="2011" >2011</option>
	<option value="2012" SELECTED>2012</option>
	<option value="2013" >2013</option>
	<option value="2014" >2014</option>
</select>

Ответ 7

Как сказал Гуффа, вы не можете надежно получить такой контроль над собственными средствами управления. Лучший способ, вероятно, состоит в том, чтобы сделать поле элементов с переключателями рядом с каждым элементом, затем использовать метки и JavaScript, чтобы сделать "ряды" интерактивными, поэтому нажатие на радиокнопку или ярлык будет окрашивать выбранную строку.

Ответ 8

Изменить нижнюю часть прокладки, т.е. может быть самым простым способом.

Ответ 9

Я разработал решение Arraxas для:

разверните окно, чтобы включить все элементы
изменить цвет и цвет при наведении курсора
получить и предупредить значение при нажатии
не выделяйте выделение после нажатия

let selElem=document.getElementById('myselect').children[0];
selElem.size=selElem.length;
selElem.value=-1;

selElem.addEventListener('change', e => {
  alert(e.target.value);
  e.target.value=-1;
});

#myselect {
  display:inline-block; overflow:hidden; border:solid black 1px;
}

#myselect > select {
  padding:10px; margin:-5px -20px -5px -5px;";
}

#myselect > select > option:hover {
  box-shadow: 0 0 10px 100px #4A8CF7 inset; color: white;
}

<div id="myselect">
  <select>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
   </select>
</div>

Ответ 10

Я думаю, вы не можете. Элемент SELECT отображается в точке, недоступной для CSS и HTML. Является ли оно серым?

Но вы можете попробовать добавить атрибут "размер".