¿Hay alguna forma de corregir el ancho de la lista desplegable?

Question

Esto es lo que tengo:

<select id="box1"> 
    <option>ABCDEFG</option> 
</select> 

<select id="box2"> 
    <option>ABCDEFGHIJKLMNO</option> 
</select> 

tengo 2 listas Desplegar diferentes. Como el ancho de una lista desplegable depende del ancho del texto más largo en la opción, termino con 2 listas desplegables con 2 anchos diferentes. Esto hace que mi página web se vea ridícula.

Lo que quiero es configurarlo para que mis dos listas desplegables tengan el mismo ancho (prefiero que el ancho sea muy largo, de modo que incluso el elemento más largo no se truncará).

Answer 1

Puede usar CSS para establecer el ancho de su elemento <select>, pero será difícil hacer que el ancho coincida exactamente con un número dado de caracteres.

¿Por qué le gustaría que se recorte el texto de la opción?

Answer 2

Longitud que se refiere a la cantidad de opciones visibles ?? Si ese es el caso, use size. Aquí está el documentation. Avísame si te refieres a algo diferente.

Después EDIT: establecer el ancho para la selección. Pero sería difícil establecer el ancho para mostrar solo una longitud particular. Second Edit: No se puede hacer eso usando CSS, tienes que usar javascript. En cada cambio de la selección, debe ver cuál de los dos elementos tiene el ancho máximo y establecer el mismo para el otro.

Answer 3

Es necesario utilizar JavaScript después se carga la página (darle a su lista id="listA"):

document.getElementById('listA').length = 20 

Este truncará con eficacia a los 20 artículos.

Answer 4

Utilice la siguiente línea. Corregirá el ancho de la lista desplegable.

<select id='box1' style='width: 200px;'> 

<select id='box2' style='width: 200px;'> 

Si desea mencionar el ancho usando CSS, puede utilizar el siguiente código.

#container select { 
    width: 150px; 
}