5

Any idea how i can hide this annoying input icon/button in Safari via CSS? I have no idea what the meaning of this new icon is because for me it has no functionality.

Thx a million, Thomas

T. Werner
  • 51
  • 1
  • 2
  • When does this show up? – Goombah Sep 26 '16 at 09:36
  • Strange is, i found no rule on which input field is shown and which not. Sometimes in date fields (which are not marked as type="date") and sometime other fields like first name, last name etc. After reloading the page it can be that its not shown, only after next reload. Really no clue. I already hide via CSS the calendar picker, inner/outer spinner HTML5/Webkit elements by default, because i have to do it myself for my admin panel. But this not help for this strange new icon/button. https://www.ideaweb.de/s/160926c2osz.png – T. Werner Sep 26 '16 at 09:49
  • Found out its the setting "AutoFill web forms: Using info from my contacts", but any chance to not show it because autocomplete="off" seems not to help? – T. Werner Sep 26 '16 at 12:07

3 Answers3

6

i resolved this problem this way

input:focus::-webkit-contacts-auto-fill-button{
    opacity: 0;
}
ihaveaproblem
  • 63
  • 5
  • 2
    See also: http://stackoverflow.com/questions/38663578/how-to-hide-autofill-safari-icon-in-input-field – kitchin Dec 08 '16 at 06:52
0

I have notice that icon appears if none empty label before exist. Possible solution is to remove all text from label and put it as css property using "after", like that:

html

<label></label>
<input>

css

label:before {
content: 'some text for label';
}
Арсений Иванов
  • 11
  • 2
0

The good news is that is seems to be gone in 10.1.1

Danial
  • 1,496
  • 14
  • 15