将鼠标悬停在 Chrome 字段建议上会缩小输入 [英] Hovering a Chrome field-suggestion shrinks input

问题描述

我使用的是最新版本的 Chrome (74.0.3729.169) 并注意到一些令人沮丧/有趣的事情.

I'm using the latest version of Chrome (74.0.3729.169) and noticed something slightly frustrating/interesting.

在下面的示例中，开始输入您以前使用过的电子邮件地址.Chrome 的建议出现后，将鼠标悬停在其中之一上.请注意输入收缩的程度.

In the example below, begin typing an email address that you've used before. Once Chrome's suggestions appear, hover over one of them. Notice how dramatically the input shrinks.

input { padding: 5px; border: 1px solid #ccc; }

<input id="email" name="email" type="text" placeholder="Email">

如果这不能重新创建行为，我深表歉意，但是我现在已经能够在多台计算机上使用此代码段重新创建它，所以我相当有信心这应该可行.

I apologize if this doesn't recreate the behavior, however I've now been able to recreate it with this snippet across multiple computers, so I'm fairly confident this should work.

此外(在这里稍微介绍一下 Meta)在 StackOverflow 自己的登录屏幕上有一个相当戏剧性的例子，结果整个表单缩小了.

Additionally (to dip my toes into Meta a bit here) there's a fairly dramatic example of this on StackOverflow's very own login screen, in which the entire form shrinks as a result.

比较下面两张图片的宽度.或者，在第二张图片中，将建议"的宽度与其对应的输入进行比较.

Compare the width of the two images below. Or, in the second image, compare the width of the "suggestion" with the input to which it corresponds.

通过检查输入本身，我没有看到任何可以解释这种行为的新样式.它似乎也与 padding 无关，因为没有 padding 的输入仍然展示了这种行为.

From inspecting the input itself, I don't see any new styles that would explain this behavior. It doesn't seem related to padding either, as an input without padding still demonstrates this behavior.

我的问题有两个方面:为什么悬停建议会导致输入缩小，并且，是否有一种方法/解决方法可以防止这种情况发生，除了em> 固定宽度还是完全禁用建议?

My question is two-fold: Why does hovering a suggestion cause the input to shrink, and, is there a method/workaround to prevent this, other than fixed width or disabling suggestions entirely?

(我认为这两种解决方法都是有条件的.在某些情况下，您可能不想为样式目的指定输入宽度，而禁用建议似乎过多且对 UX 有害)

(I think that both of these workarounds are conditional. There are instances where you may not want to specify an input width for styling purposes, and disabling suggestions seems excessive and harmful to UX)

或者可能是某个地方的 Chromium 错误票证(我搜索了没有运气 - 谷歌搜索任何与 Chrome 的自动填充/自动完成相关的内容都是关于安全的无关文章)?

Or perhaps a Chromium bug ticket somewhere (I've searched with no luck - googling anything related to Chrome's autofill/autocomplete is a mess of unrelated articles about security)?

推荐答案

你所面临的与:-webkit-autofill 伪类，通过自动完成对输入应用一些默认样式.

What you are facing is related to :-webkit-autofill pseudo class that is applying some default styling to the input with an autocomplete.

:-webkit-autofill CSS 伪类在元素的值被浏览器自动填充时匹配.

The :-webkit-autofill CSS pseudo-class matches when an element has its value autofilled by the browser.

不幸的是，我无法找到这些样式的确切定义位置，但这里有一个示例来确认这一点.如果您尝试使用相同的宽度值，您将避免收缩效果:

Unnfortunately, I am not able to find where exactly those styles are defined but here is an example to confirm this. If you try to use the same value of width you will avoid the shrink effect:

:-webkit-autofill {
  width: 173px;
}

<input id="email" name="email" type="text" placeholder="Email">

在上面的链接中您还可以阅读:

In the above link you can also read:

注意:许多浏览器的用户代理样式表在它们的 :-webkit-autofill 样式声明中使用 !important，使它们不可被网页覆盖，而无需求助于JavaScript 技巧.

Note: The user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overrideable by webpages without resorting to JavaScript hacks.

因此，即使使用 !important，您也无法覆盖某些样式:

So even with !important you won't be able to override some styles:

:-webkit-autofill {
  width: 173px;
  background:red!important; /* will not work*/
  border:2px solid blue;
  margin-left:150px;
}

<input id="email" name="email" type="text" placeholder="Email">

对于宽度问题，我想唯一的方法是定义一个明确的宽度，因为我已经尝试过auto、initial、unset，等等，但它们不起作用.

For the width issue, I guess the only way is to define an explicit width as I have tried auto, initial, unset, etc and they aren't working.

如果不能设置宽度而想要默认的，可以考虑JS来做:

If you cannot set a width and you want the default one, you can consider JS to do this:

document.querySelector('#email').style.width=document.querySelector('#email').offsetWidth+"px";

<input id="email" name="email" type="text" placeholder="Email">

这篇关于将鼠标悬停在 Chrome 字段建议上会缩小输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！