Posterous theme by Cory Watilo

Input text with CSS

We don't need javascript for input box hover,focus style. We can use with CSS.It's more easy and useful than javascript.

input[type=text]
{
/* CSS Code Here */
}

type=text mean for input type=text only. You can alos use foucs and hover for that.

input[type=text]:focus
{
/* CSS Code Here */
}

input[type=text]:hover
{
/* CSS Code Here */
}

Full Sample is following

[sourcecode lang="html"]
<html>
<head>
<title>Input box Demo</title>
<style>
input[type=text]
{
background-color:#EFCEAD;
}

input[type=text]:focus
{
background-color:#ADCEEF;
color:#333;
}

input[type=text]:hover
{
background-color:#CEADEF;
color:#fff;
}

</style>
</head>
<body>
<form>
<input type="text" name="sample">
<input type="text" name="sample">
<input type="text" name="sample">
<input type="text" name="sample">
<input type="submit" value="submit">
</form>
</body>
</html>
[/sourcecode]

Demo Here