Powiadomienia Chrome HTML5 z białą czcionką na białym tle

5

Po wypełnieniu danych wejściowych niewłaściwym typem lub wzorcem i naciśnięciu „prześlij” Chrome wyświetla powiadomienia w sposób pokazany poniżej:

Poprawny

Chodzi o to, że używam motywu z ciemnym tłem w moim systemie, więc domyślna czcionka jest biała (lub blisko niej). Z jakiegoś powodu Chrome używa tej czcionki w tych powiadomieniach, co powoduje:

Źle

Próbowałem zmienia Use GTK+ Themesię Use Classic Themena chrome://settings, ale problem trwało. Jedynym sposobem na „rozwiązanie” było przejście na motyw z czystym tłem (w moim systemie, nie w przeglądarce).

Czy istnieje jakieś obejście tego problemu?

Obecnie używam Chromium Version 31.0.1650.63 Built on Debian 7.2, running on Debian 7.3 (238485).

Alex
źródło
Spróbuj przesłać problem tutaj
Oriol,
Czy masz przykładową stronę?
mpy

Odpowiedzi:

5

Tylko przeglądarki WebKit umożliwiają stylizację bąbelków sprawdzania poprawności przy użyciu -webkit-validation-bubble*stylów CSS.

Ponieważ jednak Chrome przeniósł się z WebKit do Blink , zostało to usunięte.
Patrz na przykład numer 259050: :: - webkit-validation-bubble przestał działać w Chrome Blink .

Teraz jedyną opcją jest zastąpienie ogólnego mechanizmu bąbelkowego sprawdzania poprawności i wysłanie własnego komunikatu.

W formularzu możesz użyć atrybutu novalidate i dokonać własnej weryfikacji po stronie klienta za pomocą przycisku Prześlij:

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

Dobrym artykułem na temat sprawdzania poprawności formularzy jest Walidacja ograniczeń: natywna walidacja po stronie klienta dla formularzy internetowych .

harrymc
źródło
Dzięki! Miałem nadzieję, że uda mi się to naprawić lokalnie (tj. Tylko w mojej przeglądarce, bez konieczności zmiany kodu strony), więc pozostawię pytanie bez odpowiedzi na dłużej.
Alex
0

Jedynym sposobem, w jaki mogę to zrobić po stronie przeglądarki, jest skorzystanie z arkusza stylów użytkownika. W systemie Ubuntu (opartym na Debianie) pożądany plik powinien być tutaj:

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

Będziesz musiał użyć narzędzi programistycznych, aby użyć opcji Sprawdź element, aby znaleźć dokładny element stylizacji CSS do zastąpienia, a następnie ustaw „kolor: czarny! Ważne;” na nim w powyższym pliku.

Jako prosty przykład do zilustrowania możesz dodać coś takiego:

body { color: green !important; }

do custom.csspliku i zapisz go, aby zobaczyć efekt (który jest natychmiastowy) na całym tekście na dowolnej stronie internetowej z bodyelementem (który jest w zasadzie dowolną stroną witryny).

mili
źródło
Niestety bąbelki walidacyjne nie nadają się do nadawania kształtów.
harrymc
To prawdopodobnie oznacza modyfikację źródła chromu w celu zmodyfikowania wewnętrznego arkusza stylów dla bąbelków ..: - /
milli
Zrób to, a wiele osób będzie cię bardzo kochać.
harrymc