Как убрать или подвинуть иконку автозаполнения в Яндекс Браузере на MacOS

Разработчики часто сталкиваются с проблемой, когда иконка автозаполнения (стрелка или выпадающий список) перекрывает содержимое поля ввода. Особенно остро это проявляется в Яндекс Браузере на MacOS, где стандартные CSS-свойства не всегда работают. В этой статье объясняем, почему возникает наложение и как его исправить с помощью простых приёмов.

Почему иконка автозаполнения мешает?

Яндекс Браузер, как и другие браузеры на движке Chromium, добавляет в поля с атрибутом autocomplete внутреннюю иконку для быстрого выбора сохранённых данных. На macOS эта иконка может отображаться поверх текста или плейсхолдера, особенно если поле имеет ограниченную ширину. В Windows подобная проблема встречается реже из-за иного расположения элемента.

Ключевые факторы, влияющие на появление иконки:

• Наличие атрибута autocomplete (особенно cc-number, tel и другие типы).
• Недостаточная ширина поля ввода (менее 220-250 пикселей).
• Отсутствие CSS-правил для управления внутренними элементами браузера.

Рабочие способы решения проблемы

1. Увеличить ширину поля ввода

Самый простой и надёжный метод - добавить дополнительное пространство справа, чтобы иконка не накладывалась на текст. Обычно достаточно увеличить ширину поля на 22-24 пикселя. Например, если исходная ширина 200px, задайте width: 224px или используйте padding-right: 24px.

2. Использовать CSS-свойство padding-right

Добавьте внутренний отступ справа, чтобы сдвинуть вводимый текст влево, освободив место для иконки. Пример:
input.card-number { padding-right: 30px; }
Этот способ работает без изменения общей ширины поля.

3. Скрыть иконку через псевдоэлементы

Для Яндекс Браузера можно попробовать скрыть иконку с помощью CSS:

input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

Обратите внимание: этот метод не гарантирует работу во всех версиях браузера и может быть переопределён обновлениями.

4. Изменить атрибут autocomplete

Если автозаполнение не критично, можно временно отключить его, задав autocomplete="off" или autocomplete="new-password". Однако для полей номера карты это может ухудшить пользовательский опыт.

Пошаговая инструкция для вашего кода

Исходный код поля:

<input 
    type="tel"
    class="input card-number"
    autofocus=""
    inputmode="numeric"
    autocomplete="cc-number"
    tabindex="1"
    name="cc-number"
    id="cc_card_number"
    placeholder="0000 0000 0000 0000"
    value="" 
    data-numeric=""
>

Чтобы убрать наложение иконки, добавьте в CSS:

.card-number {
    width: 100%;
    max-width: 280px;
    padding-right: 30px;
    box-sizing: border-box;
}

Если поле уже имеет фиксированную ширину, просто увеличьте её на 22-24 пикселя. Например, замените width: 200px на width: 224px.

FAQ по иконке автозаполнения

Почему иконка появляется только в Яндекс Браузере на MacOS?

Это связано с особенностями реализации Chromium под macOS. Яндекс Браузер использует собственную тему оформления, где иконка может отображаться поверх поля, а не сбоку, как в Windows. Разница в рендеринге возникает из-за разных системных стилей.

Можно ли полностью отключить автозаполнение для одного поля?

Да, установите атрибут autocomplete="off" или используйте значение new-password. Однако браузер может игнорировать это для полей с типами cc-number, tel и email в целях безопасности.

Как проверить, что иконка больше не мешает?

После внесения изменений откройте страницу в Яндекс Браузере на MacOS, нажмите на поле ввода и проверьте, не перекрывает ли иконка плейсхолдер или введённый текст. Используйте инструменты разработчика (F12), чтобы убедиться, что отступы применились.

Поможет ли изменение z-index?

Нет, иконка автозаполнения является частью теневого DOM браузера и не реагирует на z-index или position из пользовательского CSS. Единственный способ - управлять отступами или шириной поля.