Cómo modificar el mismo ancho de entrada de texto HTML y desplegable de entrada

tengo los dos elementos HTML así:Cómo modificar el mismo ancho de entrada de texto HTML y desplegable de entrada

<input type="text">

<select> 
    <option>Apple</option> 
    <option>Orange</option> 
    <option>Banana</option> 
    <option>Grapes</option> 
</select>

No estoy en absoluto capaz de hacerlos el mismo ancho No importa qué ancho especifique para AMBOS elementos, 100% o 200px o lo que sea, el menú desplegable siempre parece ser aproximadamente 5 px más corto que el cuadro de texto. Esto sucede en IE, Firefox y Chrome, en WINDOWS.

¿Cómo puedo configurar para que tengan el mismo ancho?

Solución

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

Fuente

2011-02-23 Anonymous

Tome un vistazo a this working Example

Puede modificar el CSS sólo para mantenerlo así:

input, select 
{ 
    width:250px;   
}

Fuente

2011-02-23 08:21:33 CloudyMarble

+1 no resuelve el problema por completo ya que me veo forzado a establecer un borde personalizado para lograr un ancho de igualdad del 100%. Noté que tendrías que establecer obligatoriamente el borde para que funcione, y destruye la apariencia y el tacto nativos. Me gustaría tener el límite nativo para los controles. Pero resuelve el problema del ancho. –

La mejor opción hasta el momento ... marcando como respuesta. Pero me gustaría dejar de lado lo fronterizo y poder establecer el ancho. –

Gracias por presentarme a la propiedad de tamaño de caja. Después de experimentar un poco, descubrí que cuando lo configuro para 'border-box' en lugar de' content-box', obtengo el efecto deseado SIN establecer un borde. –

Por qué no hacerlo?

input[type="text"] { 
    width: 200px; 
} 

select { 
    width: 205px; 
}

Fuente

2011-02-23 08:00:55

realmente inteligente y práctico :) pero yo soy el tipo de persona que no lo hace dormir después de hacer un "truco". Tengo curiosidad ... ¿por qué no serían del mismo ancho? Y su solución ... la diferencia de ancho puede aumentar a 10px o disminuir a 0 dependiendo del tema también. ¿Qué haría entonces? –

@Senthil: sí, lo siento, no pude resistirme. Siempre ha sido un fastidio diseñar el elemento '

Cómo modificar el mismo ancho de entrada de texto HTML y desplegable de entrada

Respuesta