css 自动填充输入时的视觉错误

aamkag61 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(96)

我有一个HTML表单，里面有一堆输入。当一个输入被Safari自动填充，然后我试图编辑输入时，字符串有一个奇怪的重叠。

如果我点击它，它似乎会自行修复，但不是在第一次点击之后，或者当我只是专注于另一个输入时。我将附上影响我的输入样式。不知道这是我的错误还是Safari中的错误，但它似乎不会发生在其他输入字段上。..

input:is([type="text"],[type="number"],[type="email"],[type="tel"],[type="url"],[type="date"]),select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    background-color: #ffffff;
    margin: 0;
    max-width: 100%;
    max-height: 2.75em;
    border: var(--approx-1px) solid var(--color-gray);
    border-radius: 0;
    padding: var(--spacing-default);
    color: var(--color-darkblue);
    font-size: 1em;
    font-family: inherit;
    text-align: center;
    text-align-last: center;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
:is(input,select):is(:hover,:focus) {
    border-color: var(--color-darkblue);
    outline: transparent;
}

谢谢你的任何想法。

css

来源：https://stackoverflow.com/questions/76134798/visual-bug-when-input-is-autofilled

2条答案

按热度按时间

gv8xihay1#

input:-webkit-autofill, 
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0px 9999px white;
}

这将在自动填充输入字段时为它们添加白色背景，这可能会防止重叠文本问题。您可以根据需要调整颜色。

我对Safari不是很友好，所以我只是给了一个建议。

赞(0）回复(0）举报 2023-05-02

9gm1akwq2#

因此，经过一点调查，我发现问题在于当::-webkit-contacts-auto-fill-button出现时，它会将输入推到左边，并导致图形故障。我不知道我们可以以伪元素为目标，但你可以。将其设置为position: absolute;并使用right: /* padding being used on the input */ ;将其移动到输入字段上方，使其“浮动”在流之外，从而防止图形故障。希望这对其他人有帮助。

赞(0）回复(0）举报 2023-05-02

我来回答

css 自动填充输入时的视觉错误

2条答案

我对Safari不是很友好，所以我只是给了一个建议。

相关问题

热门标签

最新问答