How to set <input> border

I am not sure how to call this kind of feature but my question is, is there a way to set the color of the following effect:

Using just border doesn't make it. 开发者_开发技巧

Use the outline property:

input:focus { outline: 2px orange solid }

outline works in all modern browsers except for IE < 8.

The :focus pseudo-class works in all modern browsers except IE - you would have to use a JavaScript workaround for that as shown here.

However, you will not be able to duplicate the desired effect (which seems to be Chrome's default behaviour when focusing on a field?) entirely because outline doesn't have a radius property. Maybe @Sarfraz' suggestion is a suitable workaround for that.

You can use this css:

input:focus,textarea:focus,select:focus{
    border:1px solid #fafafa;
    -webkit-box-shadow:0 0 6px #007eff;
    -moz-box-shadow:0 0 5px #007eff;
    box-shadow:0 0 5px #007eff;
}

Check out the demo

off course you can change the color as you like.