When typing in input fields safari is creating a dropdown based contacts. I can't figure out how to hide this dropdown. I am able to hide the contacts button.
I'm running Safari Version 11.0.1
Fiddle to reproduce:
https://jsfiddle.net/27n5jL40/1/
<input type="text" name="fname"><br>
Hiding the auto-fill-button
input::-webkit-contacts-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
position: absolute;
right: 0;
}
Well, I realize this answer probably comes a bit late, BUT I think I can help. I have found empirically that Safari get its hints from a) the name of the field, b) the associated label, or c) adjacent text. It figures out things like field names "name", "firstname", "lastname", and labels or adjacent text like "name", "First name", "Last name".
In my application, it was competing with a custom autofill. I defeated my dropdown as follows:
I changed my field name from xx_firstname to mxyzptlk, and the label from First Name to F‌irst N‌ame. The ‌ character is a zero width non-joiner. You can't see it on the screen, but it appears to defeat Safari - at least for now!
Wish I'd found some clever css, but this was the best I could come up with.