How are inputs, links, buttons, etc able to turn that fuzzy blue color?_问答_开发者

How are inputs, links, buttons, etc able to turn that fuzzy blue color?

开发者 https://www.devze.com 2023-01-24 07:09 出处：网络

This may be a dumb question, but that fuzzy blue color that you get when focusing on stuff? Yeah, the one I\'m getting when focused on this texta开发者_如何学Gorea right now. I\'m guessing it\'s a bro

This may be a dumb question, but that fuzzy blue color that you get when focusing on stuff? Yeah, the one I'm getting when focused on this texta开发者_如何学Gorea right now. I'm guessing it's a browser thing, but I want to know: what causes this?

More importantly, I notice that when TAB-bing around my own web app, this does not happen. What am I doing to cause this behavior to break, or alternately, what can I do to enable this behavior on my own site?

EDIT: There seems to be confusion about exactly what behavior I'm referring to, so here it is:

How are inputs, links, buttons, etc able to turn that fuzzy blue color?

In css, the style of an input can be set with ':focus'. Take a look at this page for further information: W3Schools. A browser can have a default stylesheet, which can result in the blue color you are referring to.

See Working Example

You can achieve similar effect like this:

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

As can be seen, it creates that effect with CSS3 and proprietary CSS styles. That will only work in modern browsers that support CSS3.

Under MSIE 8 and 9, :focus requires one of the following doctypes: