13

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.

6
  • Placing the cursor in the search @ stackoverflow does not produce the visual you are describing.
    – jgallant
    Jun 15, 2009 at 14:22
  • 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.
    – ilya n.
    Jun 15, 2009 at 14:26
  • 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: 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.
    – jjxtra
    Jun 15, 2009 at 14:27
  • 1
    no, while using google chrome its showing a golden color border Jun 15, 2009 at 14:27
  • its not a problem, i just want to change the border color while placing the cursor inside the text box. is it possible Jun 15, 2009 at 14:28

6 Answers 6

18

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.

12

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
  • 1
    The outline property is more appropriate here than setting the border.
    – Tyler Rash
    Jun 15, 2009 at 14:37
  • You're right, the outline property is more appropriate here. It doesn't work in IE however but neither does the :focus pseudo class.. Jun 16, 2009 at 8:33
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
  • yes, but in need this same, while cursor inside the textbox, if its comes out then it will act as normal textbox Jun 15, 2009 at 14:32
  • Are you saying that you want the outline whether the focus is on the textbox or not? You can use the input selector for that (instead of input:focus).
    – Tyler Rash
    Jun 15, 2009 at 14:34
  • IE7 doesn't support the :focus selector, I edited my answer to include a jQuery workaround.
    – Tyler Rash
    Jun 15, 2009 at 14:51
  • IE7 doesn't support outline either
    – SpliFF
    Jun 15, 2009 at 14:55
2

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.

1

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/

0

If you're using bootstrap you can use

class="form-control"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.