examples - select html

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

Question

En el formulario, tengo un seleccionar y dos campos de entrada. Estos elementos están alineados verticalmente. Lamentablemente, 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é 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?

Answer 1

Agrega este código en css:

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

Answer 2

Probé la respuesta de Gaby (+1) más arriba, pero solo resolvió parcialmente mi problema. En cambio, 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;
}

Answer 3

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

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }

Answer 4

Respuesta actualizada

Aquí 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 propiedad de 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 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 y en adelante ...

Original

si reinicia sus bordes , el elemento select siempre será 2 píxeles menos que los elementos de input .

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