html - Safari 的自动完成功能破坏了输入表单

Question

我的网站上有一个表单被 Safari 的自动完成功能破坏了，如下所示:

我试过禁用自动完成但不影响。 这是我的 first_name html 输入:

<div class="form-group" _v-3d7f6581="">
    <label class="control-label" _v-3d7f6581="">First Name*</label>
    <input name="first_name" type="text" class="form-control" required="" autocomplete="off" _v-3d7f6581="">
    <small class="help-block" _v-3d7f6581="" style="display: none;"></small>
</div>

CSS:

.form-group input[type=text],
.form-group input[type=password],
.form-group input[type=number],
.form-group input[type=email],
.form-group select,
.form-group textarea {
    display: block;
    width: 100%;
}

有人有办法解决这个问题吗？

Answer 1

您可以直接使用 webkit 编辑自动完成输入的 CSS!使用此功能时，请确保检查跨平台兼容性，因为您提到此问题是 Safari 特有的。您可能会发现利用它对您有利并且只将更改应用到 Safari 是有益的。

input:-webkit-autofill {
    text-size: 0.8em;
}

通过将 CSS 标识符、类等串在一起，您可以对所有输入应用相同的设置!

有关使用 webkit 编辑自动完成表单的更多信息，checkout this article here !