Notificações em HTML5 do Google Chrome que exibem uma fonte em branco sobre fundo branco

Question

Ao preencher uma entrada com o tipo ou padrão errado e clicar em "enviar", o Chrome exibe as notificações conforme mostrado abaixo:

Oproblemaéqueestouusandoumtemacomumfundoescuronomeusistema,entãoafontepadrãoébranca(oupróximaaela).Poralgummotivo,oChromeusaessafontenessasnotificações,resultandonoseguinte:

Eu tentei alterar Use GTK+ Theme para Use Classic Theme em chrome://settings , mas o problema persistiu. A única maneira de "resolver" era mudar para um tema com um fundo claro (no meu sistema, não no navegador).

Existe alguma solução para isso?

Atualmente, estou usando o Chromium Version 31.0.1650.63 Built on Debian 7.2, running on Debian 7.3 (238485) .

    

Answer 1

Apenas os navegadores WebKit permitem o estilo de bolhas de validação usando o -webkit-validation-bubble* estilos CSS.

No entanto, como o Chrome mudou do WebKit para Piscar , ele foi removido.
Veja por exemplo Problema 259050: :: - o webkit-validation-bubble parou de funcionar no Chrome Blink .

Sua única opção agora é substituir o mecanismo de bolha de validação geral e emite sua própria mensagem.

Em um formulário, você pode usar o atributo novalidate e fazer seu próprio cliente validação no botão Enviar:

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);
}

Um bom artigo sobre validação de formulário é Validação de restrição: validação do lado do cliente nativo para formulários da Web .

    

Answer 2

A única maneira que posso pensar em fazer isso apenas no lado do navegador é usar uma folha de estilos do usuário. No Ubuntu (baseado no Debian), o arquivo que você deseja deve estar armazenado aqui:

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

Você terá que usar as Ferramentas do desenvolvedor para usar a opção Inspecionar elemento para descobrir o elemento de estilo CSS exato a ser substituído e, em seguida, definir "cor: preto! importante;" no arquivo acima.

Como um exemplo simples para ilustrar, você pode adicionar algo como:

body { color: green !important; }

para o arquivo custom.css e salve-o para ver o efeito (que é imediato) em todo o texto em qualquer página da web com um elemento body (que é basicamente qualquer página do site).