Discussion:
Cambiar el tamaño de un elemento INPUT mediante CSS
Reynier Perez Mira
2009-05-10 00:52:45 UTC
Permalink
Buenas noches lista:
¿Es posible cambiar el tamaño de un elemento INPUT de tipo BUTTON mediante CSS? He probado con la siguiente regla en mi fichero CSS pero no me hace nada:

form.formulario_login input[type=button] { border:1px solid #97ABD0; background-color: #F0F2FF; width: 20px; }

El HTML para ese código es el siguiente:

<form action="/frontend_dev.php/login" method="post" class="formulario_login">
<fieldset>
<legend>Iniciar sesión</legend>
<ul>
<li><label for="signin_username">Usuario</label><input type="text" name="signin[username]" id="signin_username" /></li>
<li><label for="signin_password">Contraseña</label><input type="password" name="signin[password]" id="signin_password" /></li>
</ul>
<p><input type="submit" value="Entrar !!!" /></p>
</fieldset>
</form>

Tengo entendido que poniendo la propiedad "size" en la definición debe funcionar pero tampoco. Me refiero a lo siguiente:
<p><input type="submit" value="Entrar !!!" size="20" /></p>

Un saludo y gracias desde ya
Ing. Reynier Pérez Mira
Dirección Técnica IP
Mauricio Dulce
2009-05-10 01:12:49 UTC
Permalink
Hola, mediante css si es posible cambiar el tamaño, color y los
atributos que desees, claro que seria preferible que usaras un class
por que al poner esta etiqueta le estaría aplicando el estilo a todos
los elementos input

input {
border:1px solid #97ABD0; background-color: #F0F2FF; width: 20px;
}

espero te sirva
Post by Reynier Perez Mira
¿Es posible cambiar el tamaño de un elemento INPUT de tipo BUTTON
mediante CSS? He probado con la siguiente regla en mi fichero CSS
form.formulario_login input[type=button] { border:1px solid #97ABD0;
background-color: #F0F2FF; width: 20px; }
<form action="/frontend_dev.php/login" method="post"
class="formulario_login">
<fieldset>
<legend>Iniciar sesión</legend>
<ul>
<li><label for="signin_username">Usuario</label><input
type="text" name="signin[username]" id="signin_username" /></li>
<li><label for="signin_password">Contraseña</label><input
type="password" name="signin[password]" id="signin_password" /></li>
</ul>
<p><input type="submit" value="Entrar !!!" /></p>
</fieldset>
</form>
Tengo entendido que poniendo la propiedad "size" en la definición
<p><input type="submit" value="Entrar !!!" size="20" /></p>
Un saludo y gracias desde ya
Ing. Reynier Pérez Mira
Dirección Técnica IP
_______________________________________________
Lista de distribución Ovillo
Puedes modificar tus datos o desuscribirte en la siguiente
dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Reynier Perez Mira
2009-05-10 01:17:15 UTC
Permalink
Post by Mauricio Dulce
input {
border:1px solid #97ABD0; background-color: #F0F2FF; width: 20px;
}
Gracias por tú respuesta Mauricio, ya lo había solucionado de otra forma y el error lo tenía yo pues el INPUT no es de tipo BUTTON sino SUBMIT, he ahí el problema. Ahora me ha quedado así:

form.formulario_login input[type=submit] { border:1px solid #97ABD0; background-color: #F0F2FF; width: 70px; }

Y funciona a la perfección.

Un saludo
Ing. Reynier Pérez Mira
Dirección Técnica IP
Ardilla Roja
2009-05-10 04:15:11 UTC
Permalink
Creo que algun IE no se lleva bien con los [type] ....
Post by Reynier Perez Mira
Post by Mauricio Dulce
input {
      border:1px solid #97ABD0; background-color: #F0F2FF; width: 20px;
}
form.formulario_login input[type=submit] { border:1px solid #97ABD0; background-color: #F0F2FF; width: 70px; }
Y funciona a la perfección.
Un saludo
Ing. Reynier Pérez Mira
Dirección Técnica IP
_______________________________________________
Lista de distribución Ovillo
Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
--
Ardilla Roja
La Trinchera // ardillaroja.com.mx
Loading...