only - if ie 11 html

Establecer la altura de un SELECT en IE

Question

IE parece ignorar la altura establecida en CSS al representar un HTML SELECT. ¿Hay algún problema para esto o solo tenemos que aceptar IE no se verá tan bien como otros navegadores?

Answer 1

Aunque establecer un valor de altura de CSS para el elemento de selección no funciona, el atributo de relleno funciona correctamente. Establecer un relleno superior e inferior hará que su elemento seleccionado parezca más alto.

Answer 2

Es correcto que no hay solución para esto aparte de abandonar el elemento seleccionado, pero si solo necesita mostrar más elementos en su lista de selección, puede simplemente usar el atributo de tamaño:

<select multiple="multiple" size="15">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

Al hacer esto, tendrá líneas vacías adicionales si su colección de elementos es más pequeña que el valor del tamaño.

Answer 3

Finalmente se encuentra en http://viralpatel.net/blogs/2009/09/setting-height-selectbox-combobox-ie.html una solución simple (al menos para IE8):

font-size:      1.0em;

Por cierto, para Google Chrome, encontró esta solución en Cómo estandarizar el alto de un cuadro de selección entre Chrome y Firefox. * /

-webkit-appearance: menulist-button;

Answer 4

Hay una solución alternativa para esto (al menos para multiselección):

• establezca el atributo de seleccionar tamaño en el tamaño de la lista de opciones (use JavaScript o configúrelo en un número lo suficientemente grande)
• establezca el atributo select max-height en lugar del height en la altura deseada (probado en IE9)

Answer 5

No estoy seguro, pero creo que esta no era una pregunta acerca de la altura de un tipo de elemento ''múltiple'', sino de un elemento desplegable de elemento seleccionado. He encontrado momentos en los que el menú desplegable parece aplastado y no muestra claramente el valor seleccionado. Sin duda, tiene que ver con la información de estilo CSS en uso en la página. La única manera de detenerlo es cambiar el CSS (que probablemente afectaría a toda la página o partes de él de formas que no desea afectar) o usar la información de estilo en el elemento de selección para anular el CSS que lo está destruyendo. Ejemplo:

<select name="myselect" id="myselect" style="font-size:15px; height:30px">
<option value="someval">somedescr</option>
...
</select>

Espero que esto ayude.

Answer 6

Puede usar un reemplazo: jQuery Elegido . Se ve bastante impresionante.

Answer 7

Sí tu puedes.

Pude establecer la altura de mi SELECT en exactamente lo que quería en IE8 y 9. El truco es establecer la propiedad de box-sizing el box-sizing content-box . Si lo hace, establecerá el área de contenido de SELECT en la altura, pero tenga en cuenta que los valores de margin , border y padding no se calcularán en el ancho / alto de SELECT , por lo tanto, ajuste esos valores en consecuencia.

select {
    display: block;
    padding: 6px 4px;
    -moz-box-sizing: content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    height: 15px;
}

Aquí hay un jsFiddle trabajo. ¿Te importaría confirmar y marcar la respuesta adecuada?

Answer 8

Use una biblioteca de UI, como jquery o yui , que proporcione una alternativa al elemento SELECT nativo, generalmente como parte de la implementación de un cuadro combinado.

Answer 9

Ver también el modelo de caja inconsistente entre entrada, seleccionar, ...

Answer 10

podrías hacer algo similar a lo que hace facebook, solo agrega relleno. No es tan bueno como uno podría desear pero se ve razonablemente bien.

Answer 11

puede usar una combinación de tamaño de fuente y altura de línea para forzarlo a agrandarse, pero obviamente solo en las situaciones donde también necesita la fuente más grande

editar:

Ejemplo -> http://www.bse.co.nz EDITAR: (este enlace ya no es relevante)

la selección al lado del cuadro de búsqueda grande tiene las siguientes reglas css:

#navigation #search .locationDrop {
    font-size:2em;
    line-height:27px;
    display:block;
    float:left;
    height:27px;
    width:200px;
}

Answer 12

quería establecer el alto del cuadro de selección para que sea más pequeño que el predeterminado. solía

select {
   position: relative;
   height: 10px !important;
   display: inline-block;
}

esto funciona en ie7 y ie8. es posible que solo necesite la propiedad de height , solo agregué la position y la display para anular las propiedades heredadas de la parte superior del dom.

Answer 13

No hay solución alternativa para esto aparte de abandonar el elemento select .

Answer 14

select{
  *zoom: 1.6;
  *font-size: 9px;
}

Si cambia las propiedades, el tamaño de select también cambiará en IE7.