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！