CSS Chrome 中蓝色焦点轮廓的默认样式是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20609485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the default style of the blue focus outline in Chrome?
提问by Barney
I have a webapp that uses contenteditable div's. I like how they appear in Chrome: when I focus, Chrome displays a nice blue glow around the div. However in Firefox I get an ugly dashed outline. What I observed so far is that Chrome stops displaying its default blue frame once I change the outline of div:focus. I'd like to make my app consistently look nice, so my question is
我有一个使用 contenteditable div 的 web 应用程序。我喜欢它们在 Chrome 中的显示方式：当我聚焦时，Chrome 会在 div 周围显示漂亮的蓝色光晕。但是在 Firefox 中，我得到了一个丑陋的虚线轮廓。到目前为止，我观察到的是，一旦我更改了 div:focus 的轮廓，Chrome 就会停止显示其默认的蓝框。我想让我的应用程序始终看起来不错，所以我的问题是
how can I replicate Chrome's default style for div[contenteditable="true"]:focus?
如何复制 Chrome 的默认样式div[contenteditable="true"]:focus？
回答by Oli Studholme
To answer the question, Webkit browsers use outline: 5px auto -webkit-focus-ring-color;. On Macs -webkit-focus-ring-coloris blue rgb(94, 158, 214)(or #5E9ED6), but on Windows and Linux it's gold rgb(229, 151, 0)(or #E59700) (ref).
为了回答这个问题，Webkit 浏览器使用outline: 5px auto -webkit-focus-ring-color;. 在 Mac 上-webkit-focus-ring-color为蓝色rgb(94, 158, 214)（或#5E9ED6），但在 Windows 和 Linux 上为金色rgb(229, 151, 0)（或#E59700）（ref）。
While I understand your desire for consistency, users generally only use one browser, and are used to their browser's default styles. Note that unless you plan to change every instance of :focusyou'll end up with inconsistency for e.g. keyboard users. Pros and cons eh!
虽然我理解您对一致性的渴望，但用户通常只使用一种浏览器，并且习惯于他们浏览器的默认样式。请注意，除非您计划更改每个实例，否则您:focus最终会遇到不一致的问题，例如键盘用户。利弊诶！
If you define outlinestyles and want to ‘revert' back to the default User Agent styles on :focus, this will help
如果您定义了outline样式并希望在 上“恢复”到默认的用户代理样式:focus，这将有所帮助
.myClass:focus {
outline: 1px dotted #212121;
outline: 5px auto -webkit-focus-ring-color;
}The -webkit-prefix color means FF, IE and Edge will ignore the second rule and use the first. Chrome, Safari and Opera will use the second rule.
所述-webkit-prefix色装置FF，IE和边缘将忽略所述第二规则，并使用第一。Chrome、Safari 和 Opera 将使用第二条规则。
HTH!
哼！
回答by SW4
This fiddlegives a good approximation, you may want to tweak to get closer to what you're specifically after though.
这个小提琴给出了一个很好的近似值，你可能想要调整以更接近你特别想要的东西。
HTML
HTML
<div contenteditable='true'>Edit Me</div>
CSS
CSS
div[contenteditable=true] {
width:200px;
border:2px solid #dadada;
border-radius:7px;
font-size:20px;
padding:5px;
margin:10px;
}
div[contenteditable=true]:focus {
outline:none;
border-color:#9ecaed;
box-shadow:0 0 10px #9ecaed;
}
回答by codeWithMe
I think I've found the perfect one, At least for me:
我想我已经找到了完美的，至少对我来说：
// Begginbutton {
outline: 5px auto rgba(0, 150, 255, 1);
-webkit-outline: 5px auto rgba(0, 150, 255, 1);
-moz-outline: 5px auto rgba(0, 150, 255, 1);
-ms-outline: 5px auto rgba(0, 150, 255, 1);
-o-outline: 5px auto rgba(0, 150, 255, 1);
/* Use a border to apply the outline */
border: 1px solid rgba(0, 0, 0, 0);
/* Unimortant styling: */
background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
}<button type="button"">Outline</button>