lunes, 18 de noviembre de 2013

Como dar estilos css a una caja de texto - input text y textarea


Bienvenid@s, hoy os mostraré las propiedades CSS fundamentales para que podáis darle vuestros estilos personalizados a los elementos input text y textarea de vuestras páginas web o blogs, de este modo puedes tener un diseño elegante y únicamente tendrás que ir cambiando los valores de las propiedades CSS hasta conseguir el diseño deseado.

Para ello crearemos una clase llamada "textbox" y utilizaremos las siguientes propiedades CSS para personalizar cualquier input text o textarea ...

border : Para aplicar estilos al borde de la caja de texto.

font-size : Para aplicar el tamaño de fuente de la caja de texto.

font-family : Para aplicar el tipo de fuente de la caja de texto.

padding : Para establecer unos márgenes entre el texto y el borde de la caja de texto.

border-radius : Para redondear las esquinas de la caja de texto.

background : Para establecer el color de fondo de la caja de texto.

color : Para establecer el color del texto de la caja de texto.

También utilizaremos el evento :hover para aplicar nuevos estilos cuando se pase el cursor sobre la caja de texto.

DEMO DE INPUT TEXT Y TEXTAREA ...



Código del ejemplo ...

 <!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Como dar estilos css a una caja de texto - input text y textarea</title>

  <style>
  .textbox
  {
  border: 1px solid #DBE1EB;
  font-size: 18px;
  font-family: Arial, Verdana;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  background: #FFFFFF;
  background: linear-gradient(left, #FFFFFF, #F7F9FA);
  background: -moz-linear-gradient(left, #FFFFFF, #F7F9FA);
  background: -webkit-linear-gradient(left, #FFFFFF, #F7F9FA);
  background: -o-linear-gradient(left, #FFFFFF, #F7F9FA);
  color: #2E3133;
  }
  
  .textbox:focus
  {
  color: #2E3133;
  border-color: #FBFFAD;
  }
 </style>
 </head>
 <body>
 <table>
 <tr>
 <td><input type="text" class="textbox" size="30" placeholder="Input Text"></td>
 <td><textarea cols="25" rows="10" class="textbox" placeholder="Textarea"></textarea></td>
 </tr>
 </table>
</body>
</html>
 




Caja de texto para blogger, textarea, input text para blog, estilos CSS a un input text para blogger, estilos CSS a un textarea para blogger, estilos CSS a un input text para Wordpress, estilos CSS a un textarea para Wordpress


2 comentarios:

Oscar Xenon dijo...

No es lo que estaba buscando pero tu código prendió mi foco y de aquí partí para hacer mi trabajo. Buenísimo tu aporte.

Oscar Xenon dijo...

Gracias por tu aporte