wysiwyg logo Simple CSS tricks for your input fields

Lets start with the simple example
the input
<input type="text" name="n1" value="" size="23" maxlength="33">

the CSS
input[type=text] {
	font-family: Arial, Sans-Serif;
	font-size: 13px;
	margin-bottom: 5px;
	display: block;
	padding: 4px;
	width: 120px;
	border: solid 1px #85b1de;
}
Lets hover the above input
the CSS
input[type=text]:hover {
	background:#F0F0F0;
}
I need different behavior for focus situation
the CSS
input[type=text]:focus {
	background:#F9F9F9;
	border: solid 1px #373737;
}
Show me how to style password input
the CSS
input[type=password] {
	background:#F9F9F9;
	border: solid 1px #736357;
}
finally textarea
the CSS
textarea {
	border: solid 1px #D6D1D1;
	padding: 3px;
	font-size: 11px;
	color: #2a2e2c;
	background-color: #fff;
}
textarea:hover {
	background:#F0F0F0;
}
textarea:focus {
	background:#F8F6F6;
}




xnet 1998 - 2011