Make glowing effect around the text box while active

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

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.

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');
});

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.