Chrome HTML5 уведомления, отображающие белый шрифт на белом фоне

Question

При заполнении ввода неправильным типом или шаблоном и нажатии "Отправить" Chrome отображает уведомления, как показано ниже:

Дело в том, что в моей системе используется тема с темным фоном, поэтому по умолчанию используется белый шрифт (или близкий к нему). По какой-то причине Chrome использует этот шрифт в этих уведомлениях, что приводит к следующему:

Я попытался изменить « Use GTK+ Theme на « Use Classic Theme в chrome://settings , но проблема осталась. Единственным способом "решить" это было изменение темы с четким фоном (в моей системе, а не в браузере).

Есть ли обходной путь к этому?

В настоящее время я использую Chromium Version 31.0.1650.63 Built on Debian 7.2, running on Debian 7.3 (238485) .

Answer 1

Только браузеры WebKit допускают стилизацию пузырьков проверки с использованием стилей CSS -webkit-validation-bubble* .

Однако, поскольку Chrome перешел от WebKit к Blink, это было удалено.
См., Например, выпуск 259050: :: - webkit-validation-bubble перестал работать в Chrome Blink.

Теперь вы можете переопределить общий пузырьковый механизм проверки и выдать собственное сообщение.

В форме вы можете использовать атрибут novalidate и выполнить собственную проверку на стороне клиента с помощью кнопки «Отправить»:

HTML

<form novalidate> ... </form>

JavaScript

var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
    forms[i].addEventListener('invalid', function(e) {
        e.preventDefault();
        //Possibly implement your own here.
    }, true);
}

Хорошая статья о проверке формы - Проверка ограничений: Проверка на стороне клиента для веб-форм.

Answer 2

Единственный способ сделать это только на стороне браузера - это использовать таблицу стилей пользователя. В Ubuntu (на основе Debian) нужный вам файл должен храниться здесь:

$HOME/.config/chromium/Default/User StyleSheets/Custom.css

Вам нужно будет использовать Инструменты разработчика, чтобы использовать опцию Inspect Element, чтобы узнать точный элемент CSS-стиля, который нужно переопределить, а затем установить «color: black!».важно; "об этом в файле выше.

В качестве простого примера для иллюстрации вы можете добавить что-то вроде:

body { color: green !important; }

в файл custom.css и сохраните его, чтобы увидеть эффект (который является немедленным) для всего текста на любой веб-странице с элементом body (который в основном является любой страницей сайта).