Foros del Web » Creando para Internet » CSS »

Style width input text vs input submit

Estas en el tema de Style width input text vs input submit en el foro de CSS en Foros del Web. Hola, Estoy tratando de que un input type="text" y un input type="submit" tengan el mismo ancho. Para ello hago tal que así: Código: .Form { ...
  #1 (permalink)  
Antiguo 19/10/2009, 13:42
Avatar de Ronin46  
Fecha de Ingreso: junio-2009
Mensajes: 398
Antigüedad: 8 años, 5 meses
Puntos: 8
Style width input text vs input submit

Hola,

Estoy tratando de que un input type="text" y un input type="submit" tengan el mismo ancho.

Para ello hago tal que así:
Código:
.Form
	{
		width:160px;
	}
Código:
A: <input class="Form" name="A" type="text">
<input class="Form" name="B" type="submit" value="B">
Pues bien, con eso hay una diferencia en el ancho.

Ahora bien, si pongo:
Código:
.Form
	{
		width:160px;
               border:0;
	}
entonces ya tiene el mismo ancho, pero... ¡lo quiero con borde!

Gracias.
__________________
http://www.controldegastos.com, acepto sugerencias para el sitio.
Repetir conmingo: "tengo que dedicar más tiempo a gozar de placer"
  #2 (permalink)  
Antiguo 19/10/2009, 13:46
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Style width input text vs input submit

no entiendo, el primer ejemplo es como lo quieres.... ya que no tiene borde

el segundo le pones borde y asi no lo quieres...
WTF?....

ya esta arreglado o que pasa? no entiendo perdona jeje
  #3 (permalink)  
Antiguo 19/10/2009, 13:51
Avatar de Ronin46  
Fecha de Ingreso: junio-2009
Mensajes: 398
Antigüedad: 8 años, 5 meses
Puntos: 8
Respuesta: Style width input text vs input submit

El primer ejemplo, efectivamente, es como lo quiero, con los bordes que traen por defecto los campos, ahora bien, como vi que tenía distinto ancho (a pesar de ponerle 160px a los dos), probé a ponerle el borde a 0 para ver si la diferencia de ancho era debido a eso, y efectivamente, si pongo el borde a 0, los campos tienen el mismo ancho.

Si no pongo el borde a 0, el campo del input submit, tiene que ser 5px mayor que el del input text, para que queden del mismo ancho

P.d: Al menos en FF
__________________
http://www.controldegastos.com, acepto sugerencias para el sitio.
Repetir conmingo: "tengo que dedicar más tiempo a gozar de placer"
  #4 (permalink)  
Antiguo 19/10/2009, 13:59
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Style width input text vs input submit

pues restale el width a "158px" modelo de div css
asi el ancho total sera de "160px" chao!...
  #5 (permalink)  
Antiguo 19/10/2009, 14:16
Avatar de Ronin46  
Fecha de Ingreso: junio-2009
Mensajes: 398
Antigüedad: 8 años, 5 meses
Puntos: 8
Respuesta: Style width input text vs input submit

Ahora el que no entiende soy yo xD

Lo que quiero decir es, a igualdad de tamaño (160px), los input text miden más que los input submit.

Obviamente, puedo poner el width del input text a 160px y del input submit a 155px, de esa forma ya tendrían el mismo ancho, que creo que es lo que me has respondido.

Mi pregunta iba más bien por si había una forma que valiese para los dos (no tener que hacer un estilo distinto para cada uno).

Y ya de paso, ¿por qué hay esa diferencia dándole el mismo ancho?
__________________
http://www.controldegastos.com, acepto sugerencias para el sitio.
Repetir conmingo: "tengo que dedicar más tiempo a gozar de placer"
  #6 (permalink)  
Antiguo 19/10/2009, 16:51
Avatar de Ronin46  
Fecha de Ingreso: junio-2009
Mensajes: 398
Antigüedad: 8 años, 5 meses
Puntos: 8
Respuesta: Style width input text vs input submit

Investigando un poco más, creo que ya sé lo que está pasando.

En los input type text el border se suma al ancho, mientras que en los input type submit el border va incluido en el ancho, de ahí la diferencia entre anchuras.

Por ejemplo:
a) input type text: ancho 160px y border 10px = 170px
b) input type submit: ancho 160 px y border 10px = 160 px (dado que en realidad pasaría a ser width 150px y border 10px

¿Alguien me puede explicar como evitar eso?
__________________
http://www.controldegastos.com, acepto sugerencias para el sitio.
Repetir conmingo: "tengo que dedicar más tiempo a gozar de placer"
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:50.