Как уменьшить высоту выпадающего списка "Выбрать"

#javascript #html #jquery #css #sass

Вопрос:

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

Вот что происходит, когда я щелкаю по тегу выбрать:

Я хочу, чтобы он был меньше, например, показывал 10 элементов одновременно.

Вот мой html:

 .selectWrapper, .selectBrand {  width: 60%;  display: grid;  grid-template-areas: "select";  align-items: center;    amp;::after {  content: '';  clip-path: polygon(100% 0%, 0 0%, 50% 100%);  width: 0.8em;  height: 0.5em;  grid-area: select;  justify-self: end;  margin-right: 1em;  background-color: #110F30;  pointer-events: none;  transition: transform 0.2s ease-out;  }    amp;:focus-within {  amp;::after {  transform: rotate(180deg);  }  }    select {  appearance: none;  width: 100%;  height: 3em;  border-radius: 50px;  border: none;  outline: none;  padding-inline: 1em;  align-items: center;  grid-area: select;  font-family: 'Open Sans', sans-serif;  font-size: 0.8em;  color: #535353;  background: linear-gradient(145deg, #d3d3d3,   #fafafa);  box-shadow: 10px 10px 20px #a4a4a4,  -10px -10px 20px #ffffff;    amp;:hover {  cursor: pointer;  }  }   }

 lt;div class="selectWrapper"gt;  lt;select name="typeSol" class="titSol" requiredgt;  lt;option value="" disabled selectedgt;Select a Typelt;/optiongt;  lt;option value=""gt;Select a Typelt;/optiongt;  lt;option value=""gt;Select a Typelt;/optiongt;  lt;option value=""gt;Select a Typelt;/optiongt;  lt;option value=""gt;Select a Typelt;/optiongt;  lt;option value=""gt;Select a Typelt;/optiongt;  lt;option value=""gt;Select a Typelt;/optiongt;  lt;option value=""gt;Select a Typelt;/optiongt;  lt;option value=""gt;Select a Typelt;/optiongt;  lt;option value=""gt;Select a Typelt;/optiongt;  lt;!-- More options --gt;  lt;/selectgt;  lt;/divgt;

Надеюсь, кто-нибудь сможет помочь.

Ответ №1:

Вы можете использовать следующие onfocus события , onblur , и onchange , чтобы изменить это. Где this представляет элемент HTML DOM. Вы можете соответствующим образом изменить значения

 .titSol, .selectBrand {  width: 60%;  display: grid;  grid-template-areas: "select";  align-items: center;    amp;::after {  content: '';  clip-path: polygon(100% 0%, 0 0%, 50% 100%);  width: 0.8em;  height: 0.5em;  grid-area: select;  align-self: end;  margin-right: 1em;  background-color: #110F30;  pointer-events: none;  transition: transform 0.2s ease-out;  }    amp;:focus-within {  amp;::after {  transform: rotate(180deg);  }  }    select {  appearance: none;  width: 100%;  height: 3em;  border-radius: 50px;  border: none;  outline: none;  padding-inline: 1em;  align-items: center;  grid-area: select;  font-family: 'Open Sans', sans-serif;  font-size: 0.8em;  color: #535353;  background: linear-gradient(145deg, #d3d3d3,   #fafafa);  box-shadow: 10px 10px 20px #a4a4a4,  -10px -10px 20px #ffffff;    amp;:hover {  cursor: pointer;  }  }   }

 lt;div class="selectWrapper"gt;  lt;select name="typeSol" class="titSol" onfocus='this.size=8;' onblur='this.size=1;' onchange='this.size=1; this.blur();' requiredgt;  lt;option value="" disabled selectedgt;Select a Typelt;/optiongt;  lt;option value="" disabled selectedgt;Select a Typelt;/optiongt;  lt;option value="" disabled selectedgt;Select a Typelt;/optiongt;  lt;option value="" disabled selectedgt;Select a Typelt;/optiongt;  lt;option value="" disabled selectedgt;Select a Typelt;/optiongt;  lt;option value="" disabled selectedgt;Select a Typelt;/optiongt;  lt;option value="" disabled selectedgt;Select a Typelt;/optiongt;  lt;option value="" disabled selectedgt;Select a Typelt;/optiongt;  lt;option value="" disabled selectedgt;Select a Typelt;/optiongt;  lt;option value="" disabled selectedgt;Select a Typelt;/optiongt;  lt;option value="" disabled selectedgt;Select a Typelt;/optiongt;  lt;option value="" disabled selectedgt;Select a Typelt;/optiongt;  lt;option value="" disabled selectedgt;Select a Typelt;/optiongt;  lt;!-- ...More Options --gt;  lt;/selectgt; lt;/divgt;

1. По какой-то причине, когда я включаю это в свой код, это результат https://i.imgur.com/mqBqB82.png

2. @GLPG35 применяете ли вы какой-либо CSS, если да, пожалуйста, добавьте это в свою ОП.

3. Я обновил свой вопрос.

4. Предоставленные вами HTML и CSS, похоже, не воссоздают проблему, с которой вы только что связали img

5. Извините, я забыл обновить класс в scss. Теперь это должно сработать.