Cómo obtener el mismo ancho de entrada y campos de selección

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

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">

Por ejemplo anterior, el mejor ancho de elemento select es de 198 u 199 píxeles (por supuesto traté 193px, pero la diferencia es mayor). Creo que depende de la resolución en varias computadoras y navegadores, ya que estos elementos no tienen el mismo ancho (a veces creo que la diferencia es de 1 o 2 px). Intenté establecer estos elementos en filas div o de tabla, pero no ayuda.

P: ¿Cómo podría obtener el mismo ancho de estos elementos?

Fuente

2010-11-01 luk4443

Igual pregunta realizada aquí: http://stackoverflow.com/questions/895904/select-inputs-and-text-inputs-in-html-best-way-to-make-equal-width/899283 – BlaM

111

respuesta Actualizado

Aquí es cómo cambiar el modelo de caja utilizado por la entrada/área de texto/elementos seleccionados de manera que todos se comportan de la misma manera. Es necesario utilizar la propiedad box-sizing 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 2px hemos mencionado anteriormente no existe ..

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

nota:En IE funciona desde la versión 8 en adelante ...

original

si restablece sus fronteras entonces el elemento select siempre será de 2 píxeles menos de los input elementos ..

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

Fuente

2010-11-01 23:09:43

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

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

Gracias. Probé tu código en varios navegadores y en Firefox todo está bien, pero no funciona en IE 8 y Opera (hay diferencias antes de ingresar y selecciona ancho) :( – luk4443

Probé la respuesta de Gaby (+1) arriba, pero solo resolvió parcialmente mi problema. En lugar de ello he utilizado el siguiente CSS, donde el contenido de la caja fue cambiado a la frontera-box:

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

Fuente

2011-05-05 09:26:53 tomsv

+21

Funciona mejor que la respuesta aceptada – cguedel

Sí, parece que los campos de formulario, por ejemplo: textarea, los campos de entrada siempre funcionan bien con el modelo de cuadro de caja de frontera. botón, casilla de verificación, radio, enviar, restablecer y búsqueda de entrada son el cuadro de la frontera por defecto. – Vennsoh

Más información: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing – JorgeeFG

añadir este código en el CSS:

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

Fuente

2015-08-08 09:50:24 151291

-3

crear otra clase y aumentar el con el tamaño de 2px ejemplo

.enquiry_fld_normal{ 
width:278px !important; 
} 

.enquiry_fld_normal_select{ 
width:280px !important; 
}

Fuente

2016-01-07 11:03:48 yousuf

Cómo obtener el mismo ancho de entrada y campos de selección

Respuesta

Cuestiones relacionadas