Разрешение проблемы разного цвета ввода текста в Safari

Быстрый ответ

Для изменения цвета текста в неактивных полях ввода на iOS, примените следующий код CSS:

input:disabled {
    -webkit-text-fill-color: red !important; /* Меняем текст на красный */
    opacity: 1; /* Убираем прозрачность у текста */
}

Слово red можно заменить на любой другой цвет, чтобы получить нужный результат.

Разберёмся с проблемой

Браузеры, в том числе и Safari на iOS, обрабатывают неактивные HTML-элементы ввода самостоятельно, применяя встроенные стили. Здесь возникает задача обеспечения согласованности интерфейсов на разнообразных устройствах и в разных браузерах.

Приведение к единообразию

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

input:disabled {
    color: black; /* Приводим цвет текста к одному для всех браузеров */
    -webkit-text-fill-color: black; /* Модифицируем для Safari */
    opacity: 1; /* Снимаем прозрачность */
}

Используются свойства color и -webkit-text-fill-color для универсализации и обеспечения совместимости со Safari на iOS. Не забывайте проверить результат как на мобильных, так и на настольных устройствах.

Поводимся за привидениями — прозрачностью и другими

Как избежать прозрачности

Браузеры, особенно Safari, могут добавлять эффект прозрачности к неактивным полям ввода. Чтобы это обойти, используйте свойства -webkit-text-fill-color и opacity: 1.

Подробнее об этом расскажет наш спикер на видео

И ясное дело про !important

Использование !important усиливает приоритет стилей, но стоит применять его умеренно и только в случае реальной необходимости, чтобы не спровоцировать беспорядок в вашем CSS.

Доступность? Учтено!

При выборе цвета для текста обратите внимание на рекомендации относительно контрастности из WCAG 2. Это помогает сделать контент доступным для всех пользователей, включая тех, кто страдает ограничениями зрения.

Визуализация

До того, как наш CSS-маг внёс свои коррективы (нерабочее поле ввода):

📖: "Жили-были..." (Слабо просматривается 😎)

После манипуляций CSS-мастера (стоит CSS стиль):

📖: "Жили-были..." (Ясный и насыщенный! 🎩🐰)

Навигация по заурядным случаям

Мониторим обновления iOS

Apple часто выпускает обновления iOS, поэтому учительствуйте за свежими новостями от Safari Technology Preview.

Создаём стойкие стили

Используйте normalize.css для установления единообразия стилей во всех браузерах.

Поддержка старых версий браузеров

Для пользователей устаревших браузеров не лишним будет создать альтернативные стили или условно применять CSS, чтобы сохранить доступность и функциональность. Важно не забывать о тестировании.

Советы и трюки

Использование CSS переменных

Задействовывайте CSS переменные для более гибкой смены цветовых тем.

Когда без JavaScript никуда

JavaScript может пригодиться, когда есть необходимость менять цвет текста в зависимости от результатов валидации формы или действий пользователя.

Единообразие вносит внешней гармонии

Не забывайте о других элементах интерфейса: обводках, фонах, отступах. Гармонизация всех этих элементов улучшает общее впечатление от дизайна.

Полезные материалы

1. :disabled – CSS: Каскадные таблицы стилей | MDN — Объяснение псевдокласса :disabled.
2. :disabled | CSS-Tricks – CSS-Tricks — Подробное изучение стилизации неактивных элементов с помощью CSS.
3. GitHub – necolas/normalize.css: A modern alternative to CSS resets — Normalize.css для создания согласованного стиля в различных браузерах.
4. WebAIM: Контраст и Цветовая Доступность – Понимание требований к контрастности и цвету по WCAG 2 — Рекомендации по контрастности и выбору цвета для доступных веб-дизайнов..
5. Safari Technology Preview Release Notes | Apple Developer Documentation — Последние новости от Safari Technology Preview.
6. Home – The A11Y Project — Всё, что нужно для создания доступных веб-проектов.