External focus focus glow

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

+4
source share
3 answers

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; } 
+21
source

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.

0
source

You can do this with css:

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

This is html:

 <input /> <br/> <br/> <input /> 
0
source

Source: https://habr.com/ru/post/890459/


All Articles