如何设置默认 Chrome 输入的轮廓样式（焦点为橙色），使其在每个浏览器中看起来都一样？Chrome 样式似乎是textarea:focus{outline: rgb(229, 151, 0) auto 5px; outline-offset: -2px}，但它不起作用（其他浏览器没有autofor outline-style）。
问问题
39908 次
6 回答
33
outline-color: rgb(77, 144, 254); // #4D90FE
outline-offset: -2px;
outline-style: auto;
outline-width: 5px;
转换成这个
input:focus {
outline:none;
border:1px solid #4D90FE;
-webkit-box-shadow: 0px 0px 5px #4D90FE;
box-shadow: 0px 0px 5px #4D90FE;
}
于 2015-02-08T18:22:17.843 回答
11
不知道我的解决方案是否对您来说足够好，但到目前为止，我不知道任何其他方式......我这样做：
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;
}
于 2014-04-07T11:01:07.540 回答
1
Chrome 60 的轮廓现在是蓝色的。
轮廓的自动样式创建一个像素轮廓，边角有“缺口”。
这可以使用 ::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;
}
第一条规则更改边框颜色。
第二条规则提供了一个上下边框，从左边开始一个像素，从右边结束一个像素。
第三条规则提供了一个左右边框，从顶部开始向下一个像素，从底部向上一个像素结束。
CAVEAT：包含元素必须显式为“位置：相对”，以便 ::before/::after 绝对定位起作用。
类名“someclass-focus”毫无意义......只要您希望伪焦点轮廓出现/消失，就必须应用/删除它。
于 2017-10-06T17:54:08.893 回答
-1
你不能，真的。
Chrome 使用“自动”大纲样式（无论这可能意味着什么），这不符合 CSS3 规范。
您最好的选择是创建自己的突出显示样式并（至少）覆盖大纲样式。这样，所有浏览器都会为您的页面提供相同的焦点元素。
复制 chrome 样式非常困难。由于默认情况下 css 不支持类似阴影的轮廓，因此仅支持实心、虚线等样式。您将不得不使用 box-shadow 来模仿它，但是，由于某些奇怪的原因，这会导致输入框的边框显示（以插入样式），这会迫使您定义输入框的边框。
例如，您可以执行以下操作：
input:focus {
box-shadow: 0px 0px 8px blue;
outline-style: none;
}
input {
border: 1px solid #999;
}
于 2014-09-29T11:23:23.707 回答
-3
于 2013-06-26T16:04:03.617 回答
-4
如果您在 Chrome 中打开样式面板检查任何输入标签，您应该会看到默认的用户代理样式表属性。使用 Web 开发人员工具中的颜色选择器或 chrome 颜色选择器插件来获取 rgb 值。
于 2013-06-26T16:05:05.683 回答