Cómo obtener el mismo ancho de entrada y seleccionar campos

109

En el formulario, tengo un campo de selección y dos de entrada. Estos elementos están alineados verticalmente. Desafortunadamente, no puedo obtener el mismo ancho de estos elementos.

Aquí está mi código:

<select name="name1" style="width:198px">
  <option>value1</option>
  <option>value2</option>
</select><br/>
<input type="text" name="id1" style="width:193px"><br/>
<input type="text" name="id2" style="width:193px">

Para el ejemplo anterior, el mejor ancho para el elemento seleccionado es 198 o 199 px (por supuesto, probé 193 px, pero la diferencia es importante). Creo que depende de la resolución, en varias computadoras y navegadores, ya que estos elementos no tienen anchos iguales (a veces creo que la diferencia es de aproximadamente 1 o 2 px). Intenté establecer estos elementos en div o filas de tabla, pero no ayuda.

P: ¿Cómo puedo obtener exactamente el mismo ancho de estos elementos?

— luk4443
fuente

1

La misma pregunta se hace aquí: stackoverflow.com/questions/895904/…

— BlaM

134

Respuesta actualizada

A continuación se explica cómo cambiar el modelo de caja utilizado por los elementos input / textarea / select para que todos se comporten de la misma manera. Debe utilizar la box-sizingpropiedad que se implementa con un prefijo para cada navegador.

-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box; 
box-sizing:content-box;

Esto significa que la diferencia de 2px que mencionamos anteriormente no existe.

ejemplo en http://www.jsfiddle.net/gaby/WaxTS/5/

nota: en IE funciona a partir de la versión 8.

Original

si restablece sus bordes , el selectelemento siempre será 2 píxeles menos que los inputelementos.

ejemplo: http://www.jsfiddle.net/gaby/WaxTS/2/

— Gabriele Petrioli
fuente

Gracias por responder. Y si configuro un borde para 2px, habrá 4 píxeles entre los campos de entrada y selección, para el borde de 3px - 6px ...?

— luk4443

1

@luk, no. Si tanto la entrada como la selección tienen el mismo ancho de borde, la diferencia se mantendrá en 2 píxeles ..

— Gabriele Petrioli

Gracias. Probé su código en varios navegadores y en Firefox todo está bien, pero no funciona en IE 8 y Opera (hay diferencias entre la entrada y el ancho de selección) :(

— luk4443

1

¿Quizás querías especificar el tamaño de la caja: caja de borde? Creo que eso es lo que quisiste decir. El cuadro de contenido es el valor predeterminado donde el relleno + los márgenes aumentan el ancho.

— O'Rooney

1

Realmente debería ser: -ms-box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; tamaño de caja: caja de contenido; La sintaxis estándar debe ir en último lugar para seguir la metodología de mejora progresiva de modo que en el futuro, cuando el estándar se implemente ampliamente, los agentes de usuario utilizarán de forma predeterminada la sintaxis estándar y usted podrá eliminar las versiones prefijadas.

— user1739635

118

Probé la respuesta de Gaby (+1) anterior, pero solo resolvió parcialmente mi problema. En su lugar, utilicé el siguiente CSS, donde content-box se cambió a border-box:

input, select {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

— tomsv
fuente

Sí, parece que los campos de formulario, por ejemplo: área de texto, los campos de entrada siempre funcionan bien con el modelo de cuadro de borde. El botón, la casilla de verificación, la radio, enviar, restablecer y la entrada de búsqueda son cuadros de borde por defecto.

— Vennsoh

2

Aquí hay un buen argumento de por qué debería usarbox-sizing: border-box . Para una buena implementación universal, considere configurar el elemento html de nivel superior y luego heredar hacia abajo para que pueda anularse fácilmente.

— KyleMit

content-box no hizo nada en mi caso. Necesitaba un cuadro de borde para que tuvieran el mismo ancho. Border-box es definitivamente la mejor solución, gracias.

— Manuel Hoffmann

5

Agregue este código en css:

 select, input[type="text"]{
      width:100%;
      box-sizing:border-box;
    }

— 151291
fuente

-4

crea otra clase y aumenta el tamaño con el ejemplo de 2px

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }

— ionMobDev
fuente