Hide Safari contacts auto-fill when [autocomplete="off"]

safari.css

input[autocomplete="off"]::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  height: 0;
  width: 0;
  margin: 0;
}

Hi, thanks for your gist! I'm trying to hide the passwords auto-fill icon when [autocomplete="off"]. Tried with this gist and doesn't work. Any ideas to hide the passwords auto-fill icon? Thank you 🙇‍♂️

input:focus::-webkit-textfield-decoration-container {
   visibility: hidden;
   pointer-events: none;
   position: absolute;
   right: 0;
}

Thanks! It worked for me :) .
It can be used to hide the credentials button:

input[autocomplete="off"]::-webkit-contacts-auto-fill-button,
input[autocomplete="off"]::-webkit-credentials-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
height: 0;
width: 0;
margin: 0;
}

Just a heads up, this will not hide Safari's 11 user dropdown, only the autofill button. Also pointer-events don't apply to hidden elements, so this property is not needed.

So is there any solution to remove the dropdown also. I am stuck with location suggestion in safari

@vidit1 Did you find a solution?

@z5h, @vidit1, so if anyone reads this (this is the first page i've found in google about this topic), here is my solution about the safari dropdown

basically, safari will scan the name, the placeholder and the label of the field. if it sees anything relevant, it will trigger the dropdown. the solution is to store the name in a data-name attribute and restore it on submit. As for the label, what I've done is to use a zero width joiner to garble the label while keeping it readable.

sample jquery code below to give an idea, not very good, but working

function makeid(length) {
    length = length || 10;
    var result = '';
    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for (var i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
}

function applyFormDataAttribute(form) {
    form.find('input[data-name]').each(function() {
        var $this = $(this);
        var rid = makeid();
        // for chrome
        $this.attr("autocomplete", "new-" + rid);
        // unreadable name
        $this.attr('name', 'ac_' + makeid());
        $this.addClass('autocomplete-disabled');

        // warning ! safari will read the placeholder, it's better to use a label
        if ($this.data('placeholder')) {
            $this.attr('placeholder', $this.data('placeholder'));
        }
        if ($this.data('label')) {
            var chars = [];
            var zwLabel = '';
            // joins chars with a zero width joiner
            chars = $this.data('label').split('');
            for (var i = 0; i < chars.length; i++) {
                if (i != chars.length - 1) {
                    zwLabel += chars[i] + '‍&zwj;';
                } else {
                    zwLabel += chars[i];
                }
            }
            $this.closest('label').html(zwLabel);
        }
    });
}

function restoreDisabledAutocomplete(form) {
    form.find('.autocomplete-disabled').each(function() {
        var $this = $(this);
        if ($this.data('name')) {
            $this.attr('name', $this.data('name'));
        }
        $this.removeClass('autocomplete-disabled');
    });
}

$(function() {
    $('form.apply-form-data').each(function() {
        var form = $(this);
        applyFormDataAttribute(form);

        // on submit restore any remaining field that is faked
        form.on('submit', function() {
            restoreDisabledAutocomplete(form);
        });
    });
});

Hello, you can try use autocomplete="new-password" - its crutch, but its works for me

it still is flaky and might not work for different versions

input[autocomplete="off"]::-webkit-contacts-auto-fill-button,
input[autocomplete="off"]::-webkit-credentials-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
height: 0;
width: 0;
margin: 0;
}

It also works for me!