Question

假设某人正在开设一个允许用户创建个人资料的网站。这个设计师非常喜欢输入字段带圆角的方式，但Chrome的自动填充功能对他们做了一些奇怪的事情。当然，他们可以采取简单的方法并删除边界半径定义，因此避免了奇怪的角落，但随后该网站将没有他们希望的外观。

以下是使用自动填充时字段外观的before-and-after images。

对于想要玩它的人来说，这里是JSFiddle。

如果有用，以下是用于修改字段的相关代码：

.field {
    background-color: #202020;
    border: 1px solid #000;
    border-radius: 4px;
    box-shadow: 0 0 5px #000;
    color: #d8d8d8;
}

input:-webkit-autofill {
    box-shadow: 0 0 0 100px #202020 inset, 0 0 5px #000;
    -webkit-text-fill-color: #d8d8d8;
}

有几次尝试找到这个问题背后的罪魁祸首，包括从两个定义中删除外部阴影，以及更改内部阴影的位置和模糊半径。灰色的角落还在那里。唯一真正的“解决方案”是恢复到方角，但这个选项被保留作为最后的手段。

经过无数次搜索此问题的解决方案后，所有可以找到的方法都是绕过默认的淡黄色背景。这是个好消息，但设计师仍然留下那些丑陋的角落。有没有办法完全摆脱它们并保持领域的原始风格？或者这是一个没有解决方法的故障？

感谢您提供任何见解或帮助。

Answer 1

我发现增加边框宽度并使其与输入背景颜色相同似乎有所帮助。然后减少填充以达到相同的高度：

https://jsfiddle.net/Lguucatv/1/

border: 4px solid #202020;
padding: 1px;

还修改了box-shadow以匹配原始设计：

box-shadow: 0 0 0 1px #000, 0 0 5px 1px #000;

Answer 2

Kreven 的解决方案虽然不是最优雅的代码行，但肯定会为我认为的大多数人完成工作。但是，我想稍微修改一下并解释为什么它甚至可以工作。我们来看看这行代码：

transition: background-color 2147483647s;

这是一个需要 68.24 年才能完成的过渡。看起来很傻，对吧？如果你想知道这个神奇数字是从哪里来的 (2147483647)，这是一个整数的最大大小，也就是 CSS 转换的最大持续时间。这种转变的作用是让浏览器的自动填充实现需要 64 年的时间才能更改输入的背景颜色。

还值得注意的是，这个廉价的技巧将消除您使用“-webkit-box-shadow”CSS 命令的需要（当然，除非您需要自动填充背景颜色与非-自动填充背景颜色）。

希望这对某人有所帮助！干杯。

Answer 3

有没有办法完全摆脱它们并保持场地的原始风格？

这是css

private func a(var arr1: [Int]) {
    arr1.removeRange(0..<2)
}

DEMO

Answer 4

将具有高动画时间的背景色转换添加到.field元素

.field {
  ...
  transition: background-color 5000s;
}

solutuion找到here

demo on codepen

Chrome的Autofill在圆形输入字段上留下灰色角落

4 个答案: