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:
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.
Gracias por tu aporte
Publicar un comentario