将鼠标悬停在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.

我的问题有两个方面:为什么将建议悬停在提示上会导致输入缩小，并且是否有防止这种情况的方法/替代方法，不是固定宽度还是完全禁用建议?

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

推荐答案

您面临的问题与

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.

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

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

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屋！