Make glowing effect around the text box while active

Question

Hi friends,

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

Outline property

http://www.w3schools.com/css/pr_outline.asp

If you want it to appear when clicking on a text box:

input:focus { outline: /* whatever */ }

IE7 doesn't support the :focus selector, but you can use jQuery:

$("input").focus(function () {
     $(this).css('outline','yellow solid thin');
});

Answer 2

I might be wrong, but I think all browsers on my Mac OS X do that for all edit boxes. It's the system behavior.

Answer 3

I would use an animated gif and use my css to get the text box inside the animated gif.

Try this link for a tutorial on css overlays: http://www.websiteoptimization.com/speed/tweak/overlay/

You will also want to use javascript to either hide or change the image when the text box gains and loses focus.

Answer 4

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"/>

Answer 5

Obviously outline isn't supported by IE7 and even if it was I doubt it would "glow". You need to do this with a custom background image or something. There's an example of doing that here:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24084560.html

BTW: You say "border color". A border is not an outline. You can just use:

<input onfocus="this.style.border='2px solid yellow'">

You can do it with the CSS :focus pseudo-class but chances are IE6/7 doesn't support it.