Make glowing effect around the text box while active

问题

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.

回答1:

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

回答2:

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.

回答3:

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

回答4:

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.

回答5:

Code-

input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

Demo- http://www.labshab.com/submit-guest-posts/

回答6:

If you're using bootstrap you can use

class="form-control"

来源：https://stackoverflow.com/questions/996371/make-glowing-effect-around-the-text-box-while-active

标签

html

css

xhtml