Altura de uma caixa de seleção HTML (lista suspensa)

Alguém pode confirmar que não é possível alterar a altura de um menu suspenso que é mostrado quando você clica em uma caixa de seleção.

O atributo size do select faz com que pareça uma lista, o atributo height no CSS também não faz muito bem.

Confirmado.

A parte que desce é definida como:

1. A altura necessária para mostrar todas as entradas, ou
2. A altura necessária para mostrar as xentradas (com barras de rolagem para ver o restante), onde xestá
   • 20 no Firefox e Chrome
   • 30 no IE 6, 7, 8
   • 16 para Opera 10
   • 14 para Opera 11
   • 22 para Safari 4
   • 18 para Safari 5
   • 11 no IE 5.0, 5.5
3. No IE / Edge, se não houver opções, uma lista estupidamente alta de 11 entradas em branco.

Para (3) acima, você pode ver os resultados neste JSFiddle

Tenho trabalhado em um plugin jquery de substituição suspensa para combater esse problema. Nesta postagem, é quase indistinguível de uma lista suspensa nativa em termos de aparência e funcionalidade .

aqui está uma demonstração (também um link para downloads): http://programmingdrunk.com/current-projects/dropdownReplacement/

aqui está a página do projeto do plugin:

http://plugins.jquery.com/project/dropdownreplacement

(atualização :) a página do plugin jquery parece não funcionar mais. Provavelmente não colocarei meu plugin em seu novo site quando ele começar a funcionar, então fique à vontade para usar o link programmingdrunk.com para demonstração / download

NO . Não é possível alterar a altura de uma lista suspensa de seleção porque essa propriedade é específica do navegador.

No entanto, se você deseja essa funcionalidade, existem muitas opções. Você pode usar bootstrap dropdown-menue definir sua max-heightpropriedade. Algo assim.

$('.dropdown-menu').on( 'click', 'a', function() {
    var text = $(this).html();
    var htmlText = text + ' <span class="caret"></span>';
    $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});

.dropdown-menu {
    max-height: 146px;
    overflow: scroll;
    overflow-x: hidden;
    margin-top: 0px;
}

.caret {
	  float: right;
    margin-top: 5%;
}

#menu1 {
    width: 160px; 
    text-align: left;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
<div class="container" style="margin:10px">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

Na verdade, você meio que pode! Não se preocupe com javascript ... Eu estava preso na mesma coisa para um site que estou fazendo e se você aumentar o atributo 'font-size' no CSS para a tag, ele também aumentará automaticamente a altura. Petty mas é algo que me incomoda muito ha ha

Esta não é uma solução perfeita, mas funciona.

Na tag de seleção, inclua os seguintes atributos, onde 'n' é o número de linhas suspensas que seriam visíveis.

<select size="1" position="absolute" onclick="size=(size!=1)?n:1;" ...>

Existem três problemas com esta solução. 1) Há um rápido flash de todos os elementos mostrados durante o primeiro clique do mouse. 2) A posição é definida como 'absoluta' 3) Mesmo se houver menos de 'n' itens, a caixa suspensa ainda terá o tamanho de 'n' itens.

A resposta Chi Row é uma boa opção para o problema, mas encontrei um erro nos onclickargumentos. Em vez disso, seria:

<select size="1" position="absolute" onclick="size=(size!=1)?1:n;" ...>

(E mencione que você deve substituir o " n " pelo número de linhas de que precisa)

Você pode alterar a altura de um. Não use height="500"(apenas um número de exemplo). Use o estilo. Você pode usar a <style>tag ou apenas:

<!DOCTYPE html>
<html>
<body>
  <select id="option" style="height: 100px;">
    <option value="1">Option 1
    <option value="2">Option 2
  </select>
</body>
</html>

Eu destaco a mudança:

  <select id="option" style="height: 100px;">

E melhor ainda ...

style="height: 100px;">

Você viu isso?

Por favor, vote se for útil!