Как скрыть значок сафари автозаполнения в поле ввода

Ответ 1

Если вы хотите полностью скрыть его, вы можете использовать следующие трюки css. В основном он обнаруживает, что "контакты-автозаполнение-кнопка" и удаляет его из поля ввода. Убедитесь, что у вас есть "absolute: position", чтобы избежать дополнительных дополнений из ваших полей.

input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

Ответ 2

Вам не нужно отменять все свойства кнопок автозаполнения.

Чтобы скрыть значки Safari в целом, вы также можете просто скрыть свою оболочку.

Поскольку значки являются Теневым контентом, DOM не покажет его, но теневая DOM. Просто включите кнопку "< > " в инспекторе.

Здесь вы найдете контейнер для упаковки, на который вы можете настроить css следующим образом:

input::-webkit-textfield-decoration-container {
  display: none; /* or whatever styling you want */
}

Внутри вы найдете брелок для пароля и индикатор блокировки крышки:

input::-webkit-caps-lock-indicator {
}

input::-webkit-credentials-auto-fill-button {
}

О, и пока вы на нем, не забудьте IE с его ясными кнопками и значками для глаз пароля:

input::-ms-clear {
}

input::-ms-reveal {
}

Ответ 3

Скрыть значок автозаполнения Safari в поле пароля input:

::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}

Ответ 4

Связано: Я хотел отрегулировать положение значка ключа для input[type="password"], но не смог найти селектор псевдоэлементов в любом месте.

Итак, я клонировал источник webkit и смог найти его:)

input::-webkit-credentials-auto-fill-button

Ответ 5

Обратите внимание: проверьте метки полей и любые значения атрибутов placeholder, поскольку они также могут привести к появлению всплывающих окон автозаполнения, несмотря на то, что правила стиля CSS применяются в обратном порядке.

Подробнее см. ниже...

Следует отметить, что в Safari (по крайней мере, версия 11+ и, вероятно, более ранние версии, а также в других последних браузерах, например Chrome, Firefox и т.д.), Даже если существуют различные обходные пути CSS для скрытия всплывающих окон автозаполнения, если это поле является именем пользователя или паролем для браузера, то поле автозаполнения по-прежнему отображается.

Я обнаружил, что браузер не только проверяет атрибут тега <input> name для таких ключевых слов, как username, login и аналогичных вариантов, но также, по-видимому, учитывает содержимое любого текста атрибута placeholder в поле и, что самое удивительное, любой текст, смежный с полем <input>, например, используемый в качестве метки поля формы. Текст метки не обязательно должен быть помещен в тег <label>, чтобы иметь этот эффект - просто чтобы быть в непосредственной близости от поля, хотя у меня не было возможности всесторонне протестировать и определить, что считается "близкой близостью" - это потребует дальнейших исследований и экспериментов или, где это возможно, анализа исходного кода различных механизмов рендеринга в веб-браузерах, например, для WebKit.

Таким образом, если у вас есть ключевые слова word, такие как username, user name, login или аналогичные варианты, а также варианты для password, браузер покажет всплывающее окно автозаполнения, когда поле сфокусировано, несмотря на любые правила CSS чтобы попытаться скрыть это!

Хотя я не был так удивлен, увидев, что всплывающее окно активируется значениями атрибута <input> name или placeholder, я был удивлен, увидев, что текст метки тоже был сочтен браузером, поэтому мне пришлось изменить формулировка и маркировка полей, чтобы убедиться, что всплывающие окна не появляются. Например, я обнаружил, что изменение текста заполнителя с 'Please enter your username...' на 'Please enter your user-name...' не позволило браузеру распознать поле как поле имени пользователя - также обратите внимание на дефис между словами user и name - без дефиса между словами - всплывающее окно все еще появилось, поэтому оно показывает, как могут исключить случаи, которые проверяют браузеры. Как примечание, я уже модифицировал атрибут field name и смежную маркировку на этом этапе, чтобы удалить ссылки на инициирующие ключевые слова или их варианты.

Ясно, что браузеры проводят интересную проверку страниц, чтобы определить, показывать ли всплывающие окна с именами пользователей и паролями - и хотя это общее поведение, которое помогает пользователям использовать диспетчеры паролей для более безопасной генерации и хранения учетных данных, бывают случаи, когда Вы не хотите, чтобы всплывающее окно автозаполнения появлялось. Существуют варианты использования, например, в интерфейсе администратора, которые позволяют администраторам, например, управлять учетными записями сотрудников персонала - где вы хотите предложить поле для поиска пользователя сотрудника по его имени пользователя. В таких случаях вы не хотите, чтобы всплывающее окно автозаполнения пыталось заполнить поле вашим собственным именем пользователя, а вместо этого позволяло бы вам вводить любое количество имен сотрудников, например. Было бы здорово, если бы один из стандартных флагов autocomplete='off' или будущий вариант могли быть приняты поставщиками браузеров для обеспечения этого чистого контроля поведения автозаполнения или стандартного атрибута CSS, который при применении всегда имел ожидаемый эффект... но увы, в настоящее время это не так.

На данный момент, однако, если вы имеете дело с этой проблемой, убедитесь, что вы также учитываете содержимое любого атрибута placeholder, который вы добавили в любое поле имени пользователя или пароля <input>, а также любой текст в виде метки, который появляется поблизости., Настраивая и экспериментируя со значениями этих меток/атрибутов, вы сможете обойти логику проверки страниц, которую браузеры используют для включения этих автозаполнений.

Как всегда в Интернете, и поскольку некоторые движки рендеринга в браузерах имеют закрытый исходный код, это, вероятно, будет скорее искусством, чем наукой, пока не будет разработан стандарт, обеспечивающий контроль над этой функцией для всех браузеров на всех платформах, и может возникнуть необходимость периодически пересматривать код для проверки его на соответствие новым версиям браузера, чтобы убедиться, что всплывающие окна не появляются вновь из-за измененной логики проверки страниц.

Ответ 6

Если вы используете поле <input>, не заключая его в тег <form>, Safari 11+ или более поздняя версия покажет вам предложение автозаполнения. Итак, вот что вы можете сделать.

Вариант 1: Убедитесь, что элементы <input> обернуты внутри элемента <form>. Не устанавливайте значение атрибута name в "username" или "login".

Вариант 2: Добавьте атрибут name и установите его значение как "поиск". <input type="text" name="search">

Примечание: Использование autocomplete="off" или autocomplete="false" на <form> и <input> не поможет. Ни одно из следующих свойств CSS не сработает.

input::-webkit-autofill,
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button