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

comments powered byDisqus