External focus focus glow

Question

Is it possible to simulate the external glow that safari and other browsers add to the input field? And avoid jquery if possible?

This article explains how to remove it: http://www.altrugon.com/css/remove-safaris-input-focus-outer-glowquitar-el-border-azul-de-los-inputs-en-safari/

thanks

Answer 1

Check out demo

Here box-shadow used in combination with the :focus psudo selector.

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; outline: none; } 

Answer 2

If you want to simulate it in the same way that it appears in web kit browsers, you can use the CSS3 Box shadow with : focus pseudo class , although note that CSS3 is not supported in all browsers.

Answer 3

You can do this with css:

 input:focus { outline:#00FF00 solid thick; } 

This is html:

 <input /> <br/> <br/> <input />