0

Estou procurando uma forma de definir um max-height para o dropdown da tag <select>, se é que possível isso, uma vez definido um max-height, eu usuária overflow: auto; para fazer como a segunda imagem, definindo uma barra de rolagem no elemento.

Se não for possível isso, alguém teria alguma sugestão para o que eu estou tentando fazer?

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

<select>
    <option value="Nenhum">Nenhum</option>
    <option value="100.00">Até R$ 100,00</option>
    <option value="200.00">Até R$ 200,00</option>
    <option value="400.00">Até R$ 400,00</option>
    <option value="600.00">Até R$ 600,00</option>
    <option value="800.00">Até R$ 800,00</option>
    <option value="1000.00">Até R$ 1.000,00</option>
    <option value="2000.00">Até R$ 2.000,00</option>
    <option value="4000.00">Até R$ 4.000,00</option>
    <option value="6000.00">Até R$ 6.000,00</option>
    <option value="8000.00">Até R$ 8.000,00</option>
    <option value="10000.00">Até R$ 10.000,00</option>
</select>

3
  • isso é do user-agent e acho que não tem como configurar a altura, ou mesmo definir que vai ter scroll, na verdade nunca vi um select nativo do browser que tivesse scroll
    – hugocsl
    23/02/2021 às 14:55
  • coloque na pergunta um exemplo verificável, vejo que de ve estar usando algo como bootstrap ou material para formatar, alguns frameworks/libs podem ter classes que ajudem, mas como o @hugocsl comentou, com puro css no elemento select pode não ser possível, com javascript ou usando alguma framework que renderiz o select de forma diferente pode ser 23/02/2021 às 15:49
  • Eu utilizo a framework da Zurb, Foundation get.foundation 23/02/2021 às 18:21

1 Resposta 1

0

Em vez de você usar max-height use o data-size do selectpiker, já é prontinho só implementar veja este exemplo acho que vai te servir:

<select class="selectpicker" data-size="2">
     <option value="Nenhum">Nenhum</option>
     <option value="100.00">Até R$ 100,00</option>
     <option value="200.00">Até R$ 200,00</option>
     <option value="400.00">Até R$ 400,00</option>
     <option value="600.00">Até R$ 600,00</option>
     <option value="800.00">Até R$ 800,00</option>
     <option value="1000.00">Até R$ 1.000,00</option>
     <option value="2000.00">Até R$ 2.000,00</option>
     <option value="4000.00">Até R$ 4.000,00</option>
     <option value="6000.00">Até R$ 6.000,00</option>
     <option value="8000.00">Até R$ 8.000,00</option>
     <option value="10000.00">Até R$ 10.000,00</option>
</select>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.6/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.6/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

dê uma olhada no boostrap4

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .