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;
}
|