Altura de un cuadro de selección HTML (desplegable)

¿Alguien puede confirmar que no es posible cambiar la altura de un menú desplegable que se muestra cuando hace clic en un cuadro de selección?

El atributo de tamaño de la selección hace que parezca una lista, el atributo de altura en el CSS tampoco hace mucho bien.

Confirmado.

La parte que se despliega se establece en:

1. La altura necesaria para mostrar todas las entradas, o
2. La altura necesaria para mostrar las xentradas (con barras de desplazamiento para ver el resto), donde xes
   • 20 en Firefox y Chrome
   • 30 en IE 6, 7, 8
   • 16 para Opera 10
   • 14 para Opera 11
   • 22 para Safari 4
   • 18 para Safari 5
   • 11 en IE 5.0, 5.5
3. En IE / Edge, si no hay opciones, una lista estúpidamente alta de 11 entradas en blanco.

Para (3) arriba, puede ver los resultados en este JSFiddle

He estado trabajando en un complemento de jquery de reemplazo desplegable para combatir este problema. A partir de esta publicación, es casi indistinguible de un menú desplegable nativo en términos de apariencia y funcionalidad .

aquí hay una demostración (también un enlace a descargas): http://programmingdrunk.com/current-projects/dropdownReplacement/

aquí está la página del proyecto del complemento:

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

(actualización :) parece que la página del complemento jquery ya no funciona. Probablemente no pondré mi complemento en su nuevo sitio cuando lo hagan funcionar, así que siéntase libre de usar el enlace de programacióndrunk.com para una demostración / descarga

NO . No es posible cambiar la altura de un menú desplegable de selección porque esa propiedad es específica del navegador.

Sin embargo, si desea esa funcionalidad, hay muchas opciones. Puede usar bootstrap dropdown-menuy definir su max-heightpropiedad. Algo como esto.

$('.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>

¡De hecho, puedes! No se moleste con javascript ... Simplemente estaba atascado en lo mismo para un sitio web que estoy creando y si aumenta el atributo 'font-size' en CSS para la etiqueta, automáticamente aumenta la altura también. Petty pero es algo que me molesta mucho ja ja

Esta no es una solución perfecta, pero funciona.

En la etiqueta de selección, incluya los siguientes atributos donde 'n' es el número de filas desplegables que serían visibles.

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

Hay tres problemas con esta solución. 1) Hay un destello rápido de todos los elementos mostrados durante el primer clic del mouse. 2) La posición se establece en 'absoluta' 3) Incluso si hay menos de 'n' elementos, el cuadro desplegable seguirá siendo para el tamaño de 'n' elementos.

La respuesta de Chi Row es una buena opción para el problema, pero encontré un error en los onclickargumentos. En cambio, sería:

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

(Y mencione que debe reemplazar la " n " con la cantidad de líneas que necesita)

Puede cambiar la altura de uno. No useheight="500" (solo un número de ejemplo). Usa el estilo. Puede usar la <style>etiqueta o simplemente usar esto:

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

Destaco el cambio:

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

Y aun mejor ...

style="height: 100px;">

¿Ves eso?

¡Vota si es útil!