Question

如何设置默认Chrome输入的大纲样式（焦点上，橙色），所以它在每个浏览器中看起来都一样？ Chrome样式似乎为textarea:focus{outline: rgb(229, 151, 0) auto 5px; outline-offset: -2px}，但它不起作用（其他浏览器auto没有outline-style。

Answer 1

default Chrome outline-style:

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

Answer 2

不知道我的解决方案是否适合您，但到目前为止，我还不知道其他任何方式......我这样做：

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

Answer 3

使用Chrome 60时，轮廓现在为蓝色。

轮廓的自动样式创建一个像素轮廓，角点为“凹槽”。

这可以使用:: before和::之后的规则来实现：

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

第一条规则更改边框颜色。

第二个规则提供了一个顶部和底部边框，从左边开始一个像素，从右边开始一个像素。

thirder规则提供左右边框，从顶部向下开始，从底部向上结束一个像素。

CAVEAT：包含元素必须明确地“position：relative”才能使:: before / :: after绝对定位起作用。

类名“someclass-focus”没有意义......只要您希望伪焦点轮廓出现/消失，就必须应用/删除它。

Answer 4

你真的不能。

Chrome使用＆＃39; auto＆＃39;大纲风格（无论可能意味着什么）并且根据CSS3规范不是。

您最好的选择是创建自己的高光样式，并且（至少）覆盖大纲样式。这样，所有浏览器都会为您的页面提供相同的焦点元素。

复制chrome样式非常困难。由于css默认不支持类阴影轮廓，因此仅支持solid，dashed等样式。您将不得不使用box-shadow模仿它，但是，由于某些奇怪的原因，这会导致输入框的边框显示（以插入样式），这会强制您定义输入框的边框。

你可以这样做：

input:focus {
  box-shadow: 0px 0px 8px blue;
  outline-style: none;
}
input {
  border: 1px solid #999;
}

http://jsfiddle.net/dstibbe/2wr0pge2/2/

Answer 5

试试这里：

Browsers' default CSS for HTML elements

您拥有Google Chrome的默认CSS。我确定那里会定义风格。

P.S。：您需要 Chrome / Safari（WebKit）。

Answer 6

如果您在Chrome中打开样式面板检查任何输入标记，您应该会看到默认的用户代理样式表属性。使用Web开发人员工具中的颜色选择器或chrome颜色选择器插件来获取rgb值。

复制Chrome默认输入的大纲样式

6 个答案: