How are inputs, links, buttons, etc able to turn that fuzzy blue color?
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:
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:
- HTML4 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - HTML5:
<!DOCTYPE html>
It produces no effect with one of the following doctypes:
- HTML4 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> - no doctype specified
Under MSIE 7 (and most probably 6 but I did not test), :focus does not work and requires a Javascript+CSS hack, see IE7 input:focus
加载中,请稍侯......
精彩评论