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).

google-chrome chromium gtk html5 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