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.
EJEMPLO=
<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>
NOTA IMPORTANTE= En lugar de usar la etiqueta <style> se deben realizar las modificaciones css en un archivo aparte .css
TOMADO DE= http://jquery-manual.blogspot.com.co/2013/11/como-dar-estilos-css-una-caja-de-texto.html
No hay comentarios:
Publicar un comentario