CODEWITHSUNDEEP
htmlcsssafari
Muh Ghazali Akbar
Muh Ghazali Akbar

Reputation: 1249

Safari's autocomplete is breaking a input form

I have a form on my site broken by Safari's autocomplete like this: enter image description here

i have tried to disable autocomplete but doesn't affect. Here's my first_name html input:

<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%;
}

Anyone have solution to fix this issue?

Upvotes: 1

Views: 917

Answers (1)

Will
Will

Reputation: 301

You can edit the CSS of auto-completed inputs directly using webkit! When using this, make sure to check for cross-platform compatibility, as you mentioned that this issue is Safari specific. You may find it beneficial to use that to your advantage and only apply the changes to Safari.

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

You can apply the same settings to all of your inputs by stringing together the CSS identifiers, classes, and so on!

For more information on the use of webkit to edit auto-complete forms, checkout this article here!

Upvotes: 1

Related Questions