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

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

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

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

10 55
html css

10 ответов:

именно здесь мы ценим всю мощь CSS3

<style>
 .bloc { display:inline-block; vertical-align:top; overflow:hidden; border:solid grey 1px; }
 .bloc select { padding:10px; margin:-5px -20px -5px -5px; }
</style>

<!-- Années -->
<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>

Скрипка

71

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

select {
    overflow-y: auto;
}

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

46

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

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

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

23

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

4

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

/* 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>
2

мой кросс-браузер. нет-прокрутка фрагмента:

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

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

0

изменить заполнение-дно, т. е. может быть самым простым возможным способом .

0

Я разработал 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>
0

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

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

-1