假设某人正在一个允许用户创建配置文件的网站上工作。这位设计师真的很喜欢输入字段带有圆角的方式,但是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;
}
为了找到此问题的根源,已进行了多种尝试,包括从两个定义中都删除了外部阴影,以及更改了内部阴影的位置和模糊半径。灰色的角落仍然在那里。唯一真正的“解决方案”是恢复到四角,但该方法被保留作为最后的选择。
经过无数次搜索此问题的解决方案之后,所有可以找到的方法就是规避默认的浅黄色背景。这是个好消息,但设计师仍然面临那些丑陋的角落。有没有办法完全摆脱它们并保持该领域的原始风格?还是没有解决方法的故障?
感谢您提供的任何见解或帮助。
最佳答案
我发现增加边框宽度并使其与输入背景颜色相同似乎有所帮助。然后减少填充以达到相同的高度:
https://jsfiddle.net/Lguucatv/1/
border: 4px solid #202020;
padding: 1px;
还修改了盒子阴影以匹配原始设计:
box-shadow: 0 0 0 1px #000, 0 0 5px 1px #000;