CSS 复制 Chrome 默认输入的轮廓样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17324960/
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
Copy Chrome default input's outline style
提问by geehertush01
How can I set the default Chrome input's outline style (on focus, the orange one), so it looks the same in every browser? Chrome style seems to be textarea:focus{outline: rgb(229, 151, 0) auto 5px; outline-offset: -2px}, however it doesn't work (there is no autofor outline-stylefor other browsers).
如何设置默认 Chrome 输入的轮廓样式（焦点上，橙色），使其在每个浏览器中看起来都一样？镀铬风格似乎是textarea:focus{outline: rgb(229, 151, 0) auto 5px; outline-offset: -2px}，但它不工作（没有auto对outline-style其他浏览器）。
回答by Андр?й Хмара
outline-color: rgb(77, 144, 254); // #4D90FE
outline-offset: -2px;
outline-style: auto;
outline-width: 5px;
convert to this
转换成这个
input:focus {
outline:none;
border:1px solid #4D90FE;
-webkit-box-shadow: 0px 0px 5px #4D90FE;
box-shadow: 0px 0px 5px #4D90FE;
}
回答by Jo Smo
Don't know if my solution is good enough for you, but so far, i don't know any other way... I do it like this:
不知道我的解决方案对你来说是否足够好，但到目前为止，我不知道任何其他方式......我这样做：
textarea:focus
{
outline:none; /*or outline-color:#FFFFFF; if the first doesn't work*/
border:1px solid #48A521;
-webkit-box-shadow: 0px 0px 4px 0px #48A521;
box-shadow: 0px 0px 4px 0px #48A521;
}
回答by user2845090
With Chrome 60 the outline is now blue.
Chrome 60 的轮廓现在是蓝色的。
The auto style of outline creates a one pixel outline, with the corners "notched".
轮廓的自动样式创建一个像素的轮廓，边角有“缺口”。
This can be achieved using ::before and ::after rules like so:
这可以使用 ::before 和 ::after 规则来实现，如下所示：
DIV.someclass--focus {
outline:none;
border: 1px solid #86A8DF !important;
}
DIV.someclass--focus::before {
position:absolute;
margin-top:-2px;
margin-bottom: -2px;
margin-left: -1px;
margin-right: -1px;
top:0px;
bottom:0px;
left:0px;
right:0px;
content: ' ';
border-left: none;
border-right: none;
border-top: 1px solid #A6C8FF;
border-bottom: 1px solid #A6C8FF;
}
DIV.someclass--focus::after {
position:absolute;
margin-top: -1px;
margin-bottom: -1px;
margin-left: -2px;
margin-right: -2px;
top:0px;
bottom:0px;
left:0px;
right:0px;
content: ' ';
border-left: 1px solid #A6C8FF;
border-right: 1px solid #A6C8FF;
border-top: none;
border-bottom: none;
}
The first rule changes the border color.
第一条规则更改边框颜色。
The second rule provides a top and bottom border that starts one pixel in from the left and ends one pixel in from the right.
第二条规则提供了一个顶部和底部边框，从左边开始一个像素，从右边开始一个像素。
The thirder rule provides a left and right border that starts one down from the top, and ends one pixel up from the bottom.
第三条规则提供了一个左右边框，从顶部向下开始，从底部向上一个像素结束。
CAVEAT: the containing element must be explicitly "position: relative" in order for the ::before/::after absolute positioning to work.
CAVEAT：包含元素必须明确地“位置：相对”，以便 ::before/::after 绝对定位工作。
The classname "someclass-focus" is meaningless... it just has to be applied/removed whenever you want the pseudo focus outline to appear/disappear.
类名“someclass-focus”毫无意义……只要您希望伪焦点轮廓出现/消失，就必须应用/删除它。
回答by dstibbe
You can't, really.
你不能，真的。
Chrome uses the 'auto' outline-style (whatever that may mean) and that isn't according to the CSS3 specs.
Chrome 使用“自动”大纲样式（无论这意味着什么），这不符合 CSS3 规范。
Your best option is to create your own highlight styling and (and at least) overwrite the outline-style. That way all browsers will have the same focus element for your page.
您最好的选择是创建自己的高光样式并（至少）覆盖轮廓样式。这样所有浏览器都将为您的页面提供相同的焦点元素。
Copying the chrome style is very hard to do. Since css by default doesn't support a shadow-like outline, only solid, dashed, etc styles are supported. You will have to mimick it using box-shadow, however, this will, for some odd reason, cause the border of the input box to show (in inset style), which forces you to define the border of the input box.
复制 chrome 样式非常困难。由于 css 默认不支持类似阴影的轮廓，因此只支持实心、虚线等样式。您将不得不使用 box-shadow 模仿它，但是，由于某些奇怪的原因，这会导致输入框的边框显示（以插入样式），这会迫使您定义输入框的边框。
You could do something like this for example:
你可以做这样的事情，例如：
input:focus {
box-shadow: 0px 0px 8px blue;
outline-style: none;
}
input {
border: 1px solid #999;
}
回答by Ivozor
Try here:
在这里尝试：
Browsers' default CSS for HTML elements
You have the default CSS of Google Chrome there. I'm sure the style will be defined there.
您在那里拥有 Google Chrome 的默认 CSS。我确定样式将在那里定义。
P.S.: You will want Chrome/Safari (WebKit).
PS：您需要Chrome/Safari (WebKit)。
回答by James Pickering
If you inspect any input tag with the styles panel open in Chrome you should see the default user agent stylesheet properties. Use the colour picker in Web developer tools or the chrome colour picker plugin to get the rgb value.
如果您在 Chrome 中打开样式面板的情况下检查任何输入标签，您应该看到默认的用户代理样式表属性。使用 Web 开发者工具中的颜色选择器或 chrome 颜色选择器插件来获取 rgb 值。
