How to make Twitter type textfield glow effect using CSS

Twitter have good attractive interface to impress the users. one of them is the textfield. Here I am talking about how we can create that thing.

Its is simple. We can make it using CSS. There used some simple css steps.

But it will not work in explorer. The new version of explorer(IE 9) supports this.

CSS

[css]
<style>
#textarea {
border:1px solid #999999;
outline:none;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:5px;
}
#textarea:focus {
border:1px solid #7dbef1;
box-shadow:0 0 5px #7dbef1;
-moz-box-shadow:0 0 5px #7dbef1;
-webkit-box-shadow:0 0 5px #7dbef1;
}
</style>
[/css]

HTML

[html]
<body>
<textarea name="textarea" id="textarea" cols="50" rows="2"></textarea>
</body>
[/html]

Source files

Tested in

9+ 

Leave a Reply

Your email address will not be published. Required fields are marked *