ancho de Select inputs y text inputs en formularios HTML

Un problema muy comun a la hora de trabajar con formularios, es que si asignamos un ancho sobre estos por ejemplo utilizando una clase o una propiedad css sobre ellas es que cuando los previsualizamos en el navegador sus anchos no son identicos. por ejemplo este caso:

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

la forma de solventar esto, es bastante sencilla y es compatible con varios navegadores, basta colocar en la hoja de estilos la siguiente regla:

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

y con eso tenemos solventado el problema. Podemos a partir de aca, asignarles los anchos que deseamos y estos se presentaran de la misma manera.

Add Comment Register



Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>