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

时间:2022-09-18 22:42:00

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 auto for outline-style for other browsers).

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

6 个解决方案

#1


14  

default Chrome outline-style:

默认Chrome大纲样式:

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

#2


8  

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

#3


0  

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默认情况下不支持类似阴影的轮廓,因此仅支持solid,dashed等样式。您将不得不使用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;
}

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

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

#4


0  

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和::之后的规则来实现,如下所示:

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.

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

CAVEAT: the containing element must be explicitly "position: relative" in order for the ::before/::after absolute positioning to work.

CAVEAT:包含元素必须明确地“position:relative”才能使:: 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”没有意义......只要您希望伪焦点轮廓出现/消失,就必须应用/删除它。

#5


-2  

Try here:

试试这里:

Browsers' default CSS for HTML elements

浏览器HTML元素的默认CSS

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).

P.S。:您将需要Chrome / Safari(WebKit)。

#6


-3  

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值。

#1


14  

default Chrome outline-style:

默认Chrome大纲样式:

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

#2


8  

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

#3


0  

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默认情况下不支持类似阴影的轮廓,因此仅支持solid,dashed等样式。您将不得不使用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;
}

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

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

#4


0  

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和::之后的规则来实现,如下所示:

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.

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

CAVEAT: the containing element must be explicitly "position: relative" in order for the ::before/::after absolute positioning to work.

CAVEAT:包含元素必须明确地“position:relative”才能使:: 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”没有意义......只要您希望伪焦点轮廓出现/消失,就必须应用/删除它。

#5


-2  

Try here:

试试这里:

Browsers' default CSS for HTML elements

浏览器HTML元素的默认CSS

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).

P.S。:您将需要Chrome / Safari(WebKit)。

#6


-3  

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值。