Make glowing effect around the text box while active

Question

Make glowing effect around the text box while placing the cursor inside the textbox. For example : just place the cursor inside the search textbox in our stackoverflow.com.

Its because of css, but i dont know how to achieve it.. Please help me.

Answer 1

Instead of outlines, the box-shadow property achieves a very smooth, nice effect of any text field:

field {
    border-color: #dbdbdb;
}

field:focus { /* When you click on the field... */
    border-color: #6EA2DE;
    box-shadow: 0px 0px 10px #6EA2DE;
}

Here's a JSFiddle Demo I once made myself showing the above code with a transition fade effect.

Answer 2

While the effect you observe on the stackoverflow search box is probably browser specific (e.g. Google Chrome) there is a way to achieve what you want using the CSS :focus pseudo class:

#foo:focus { border: 2px solid red; }

<input id="foo" type="text"/>