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

Question

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

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

Fiddle

Answer 2

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

select {
    overflow-y: auto;
}

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

Answer 3

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

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

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

Answer 4

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

Answer 5

Только 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>

Answer 6

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

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

Answer 7

Я разработал решение 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>

Answer 8

Измените padding-bottom, т. Е. Возможно самый простой способ

Answer 9

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

Answer 10

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

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