HTML - Inputs con diferentes tamaños en Firefox/Chrome

Inputs con diferentes tamaños en Firefox/Chrome

Publicado por Eduardo (1 intervención) el 18/10/2017 21:33:38

Hola, tengo un formulario, que por cuestiones de diseño cada input tiene un tamaño distinto, el problema es que en Firefox se ven parejas las cajas
Mozilla

pero al verlo desde otros navegadores (Chrome, IE, Safari) adquieren un tamaño diferente
Chrome

de que manera logro hacer que en todos los navegadores se vean parejas las cajas de texto??

El código es el siguiente:

<font color="#555756">Nombre(s):  </font><INPUT type="text" name="nombre" placeholder="Nombre" style="width:623px;"><br><br>

<font color="#555756">Apellido Paterno:  </font><INPUT type="text" name="ap_pat" placeholder="Apellido Paterno" style="width:576px;"><br><br>

<font color="#555756">Apellido Materno:  </font><INPUT type="text" name="ap_mat" placeholder="Apellido Materno" style="width:570px;"><br><br>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 11

Val: 105

Inputs con diferentes tamaños en Firefox/Chrome

Publicado por Enrique (36 intervenciones) el 18/10/2017 22:31:51

Debes agregar estilo mediante css, con las diferentes sintaxis que ocupa cada navegador
por ejemplo para dar estilo a todas tus cajas de texto seria mas o menos así

/*Este código te va a ayudar a darle los bordes redondeados a todos inputs mediante css como los muestra Firefox*/

input{

font-size:25px;

color:·#494494;

-moz-border-radius: 20px; /* Firefox */

-webkit-border-radius: 20px; /* Google Chrome y Safari */

border-radius: 20px; /* CSS3 (Opera 10.5, IE 9 y estándar a ser soportado por todos los futuros navegadores) */

position:relative;

float:right;

nota aunque digas que firefox esta parejo yo veo disparejas tus input, así que yo pondría todo eso en un div para que al mandar los datos a la do derecho estén alineado siempre con el div contenedor
o sea

<div>

<font color="#555756">Nombre(s):  </font><INPUT type="text" name="nombre" placeholder="Nombre" style="width:623px;"><br><br>

<font color="#555756">Apellido Paterno:  </font><INPUT type="text" name="ap_pat" placeholder="Apellido Paterno" style="width:576px;"><br><br>

<font color="#555756">Apellido Materno:  </font><INPUT type="text" name="ap_mat" placeholder="Apellido Materno" style="width:570px;"><br><br>

</div>

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar