¿Cómo puedo ecualizar las alturas de los campos de entrada de texto?

¿Cuál es la mejor manera de ecualizar la altura de mis elementos <select..> y mis elementos <input type="text"..>? Está resultando difícil debido a las diferencias en los modelos de tamaño de caja.¿Cómo puedo ecualizar las alturas de los campos de entrada de texto?

agente de usuario de estilo de Google Chrome tiene esto:

select { -webkit-box-sizing: border-box; }

..whereas otros campos de entrada de texto utilizan el modelo de caja de contenidos. ¿Por qué la diferencia? ¿Debo hacer que todos mis campos de entrada basados en texto usen el modelo de cuadro de borde?

BTW, estoy usando el modo compatible con los estándares (usando <!DOCTYPE html>).

Fuente

2010-04-15 David

Una pregunta interesante para la que no tengo respuesta. Si no obtienes nada aquí, quizás vuelvas a preguntar en http: // doctype.com/ –

posible duplicado de [Seleccione entradas y entradas de texto en HTML - ¿La mejor manera de hacer el mismo ancho?] (http://stackoverflow.com/questions/895904/select-inputs-and-text-inputs-in-html- best-way-to-haz-equal-width) –

Tal vez estoy fuera de la base pero ¿ha intentado usar valores de altura de línea?

Fuente

2010-04-16 17:31:26 Montane

¿No podría simplemente establecer explícitamente la altura de todos los campos de entrada y seleccionarlos a una altura de píxel específica usando CSS? Si no se "parece" a la misma altura debido a los bordes, elimine los bordes o configúrelos uniformemente de la misma manera. Por ejemplo:

<html> 
    <body> 
    <input type=text style="border: 1px solid black; height: 37px;">&nbsp; 
    <select style="border: 1px solid black; height: 37px; line-height: 37px; font-size: 28px;"></select>&nbsp; 
    <input type=button style="border: 1px solid black; height: 37px;"> 
    </body> 
</html>

Esto hace que los tres campos de formulario tengan 37 píxeles de altura. Funciona en IE y Chrome, pero no lo he probado en otro lugar.

O bien, una vez que la página se haya cargado, recorra todos los campos de formulario, encuentre el más grande y configure el alto de los demás utilizando su atributo style.height.

Fuente

2010-04-16 17:49:23 Sparafusile

El problema es que los diferentes modelos de tamaño de caja tratan el concepto de altura de forma diferente, y parece haber incoherencia entre los navegadores en cuanto a los modelos de tamaño de caja que se aplican. controles. – David

Ver mis ediciones. Hay formas en torno a lo que mencionas, solo tienes que probar diferentes estilos. – Sparafusile

Sí ... esto es extremadamente difícil.
No olvide que hay problemas con el tratamiento de elementos de formulario de forma diferente. La manipulación cruzada de la forma del navegador es imposible en el mejor de los casos. : D

Algunas cosas a tener en cuenta. línea-altura no se puede utilizar en todos los elementos .. es decir. firefox codifica una altura de línea para ingresar elementos [tipo = texto].

Tengo un artículo sobre el uso de inline-block y alineación vertical, que puede ayudar a algunos .. (utilizar verital-align: baseline;) The Joys of Inline Block at screwlewse.com

También hay que tener en cuenta que muchos de los navegadores más recientes incluyen esta cromo añadido para hacer que las entradas del formulario se parezcan más al sistema operativo. (pero parece un problema diferente)

Fuente

2010-04-17 01:39:16

¿Qué tal?

select {padding: 1px;}

Fuente

2010-11-14 00:32:11 James

Sí, debe utilizar hacer que todos los "campos de entrada basados en texto utilicen el modelo de cuadro de borde".

Esto ya ha sido respondido en varias otras preguntas de SO, such as here.

El hecho de que WhatWG/W3c acepte el modelo actual de caja de frontera es bastante extraño.
Que no lo hayan hecho consistentemente es aún más extraño.

No hay nada de malo en sobreescribir los valores predeterminados para crear un diseño consistente.
No hay otra solución que sea tan confiable o tan correcta.

Fuente

2012-09-06 11:58:15 SamGoody

¿Cómo puedo ecualizar las alturas de los campos de entrada de texto?

Respuesta

Cuestiones relacionadas