web-dev-qa-db-ja.com

Chrome HTML5通知は白い背景に白いフォントを表示します

入力に間違ったタイプまたはパターンを入力して「送信」を押すと、Chromeは次のように通知を表示します。

Correct

問題は、システムで背景が暗いテーマを使用しているため、デフォルトのフォントは白(またはそれに近い)です。何らかの理由でChromeはこれらの通知でそのフォントを使用するため、次のようになります。

Wrong

_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)を使用しています。

5
Alex

WebKit ブラウザーのみが、 -webkit-validation-bubble* CSSスタイル。

ただし、ChromeがWebKitから Blink に移動したため、これは削除されました。
たとえば、 Issue 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);
}

フォームの検証に関する優れた記事は 制約の検証:Webフォームのネイティブクライアント側の検証 です。

5
harrymc

ブラウザ側でのみこれを行うために私が考えることができる唯一の方法は、ユーザースタイルシートを使用することです。 Ubuntu(Debianベース)では、必要なファイルを次の場所に保存する必要があります。

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

開発ツールを使用して[要素の検査]オプションを使用し、オーバーライドする正確なCSSスタイリング要素を見つけて、「color:black!important;」を設定する必要があります。上記のファイルでその上に。

説明する簡単な例として、次のようなものを追加できます。

body { color: green !important; }

custom.cssファイルに保存し、保存して、Webページ上のすべてのテキストへの影響(即時)を確認します。 body 要素(基本的に任意のサイトページ)。

0
milli