numeracion - ol html

Altura del cuadro de lista HTML de un solo elemento

Question

Tengo un HTML <select> que quiero que aparezca como un "cuadro de lista" (un cuadro que muestra varios elementos simultáneamente, a diferencia de un cuadro desplegable). Sin embargo, solo quiero permitir que se seleccione un solo elemento. También quiero establecer el alto del cuadro (a través de CSS) para que sea el 100% del tamaño del contenedor.

Estas tres cosas parecen ser mutuamente excluyentes. Establecer el atributo multiple del elemento <select> hará que el control se represente como un cuadro de lista en lugar de un menú desplegable. Sin embargo, no quiero que se seleccionen elementos múltiples, así que esto no funciona. La única otra manera que conozco de hacer una <select> en un cuadro de lista es establecer el atributo de size en un valor> 1. Esto también establecerá el alto del cuadro, y parece que no puedo cambiar la altura a través de CSS cuando se establece el atributo HTML.

Answer 1

Simplemente coloque un borde en el cuadro de selección y configure una altura. Funcionó para mí

select.custom-select-box {

border: 1px solid #999;

height: 28px;

}

Answer 2

Puede hacer que <select> 100% de la altura del <form> que lo contiene. Vea este violín para ver un ejemplo de un div que encierra un formulario, con una selección que llene la altura del formulario.

Esto comienza con una estructura simple, lo suficiente como para que el formulario esté encerrado en algo para que pueda ver el diseño relativo.

<div>
    <form>
        <select id="thelist" size="4">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
        </select>
    </form>
</div>

Le doy una altura al div, un fondo para que puedas verlo, y relleno para que su contenido no lo cubra naturalmente. Haga que la forma sea de la altura que desee, incluido el 100% de la div. Lo hice en un 90%, así que aún puedes ver el div que lo incluye. Observe que el ancho del formulario ocupa el ancho del div excepto por el relleno.

A continuación, puede configurar el alto de la lista de selección para cualquier cosa que desee dentro del formulario. Aquí está mi CSS

div {
    background-color: #fff0f0;
    height: 40em;
    padding: 1.5em 1.5em 0 1.5em;
}
form {
    background-color: #f0f0f0;
    height: 90%;
}
#thelist {
    height: 100%;
}

Armado como un fragmento, y haciéndolo más pequeño para que se ajuste mejor aquí ...

div {
    background-color: #fff0f0;
    height: 20em;
    padding: 1.5em 1.5em 0 1.5em;
}
form {
    background-color: #f0f0f0;
    height: 40%;
}
#thelist {
    height: 100%;
}

<div>
    <form>
        <select id="thelist" size="4">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
        </select>
    </form>
</div>