web-dev-qa-db-ja.com

Chrome 83:新しいフォームスタイルの色を変更

new Chrome update Chromeは、改善されたデフォルトのフォームスタイルを表示しています。この投稿によると、このフォームのテーマを、Webサイトのカラーセットに一致するように変更します。

私たちは美しく、ウェビーで、ニュートラルなものを目指していました。私たちは、すべてのデザインシステムが新しいデザインに少しずつ気づき、自分のブランドにどのように適応されるかを簡単に想像できることを願っています。

私は過去数時間を費やして、私のウェブサイトの他の部分とのコントラストが非常に悪いデフォルトの青色を削除しようとしました。 「-webkit-appearance:none;」の使用は別として。チェックボックスなどのスタイルを自分で変更することは可能かどうかわかりません。

誰かがこの問題も経験していますか、それとも解決策やドキュメントが不足していますか?

18
WesleySmits

使用する:

input[type="checkbox"] {
    -webkit-appearance: none;
}

次に、好きなようにスタイルを設定します。

チェック状態については、:before疑似要素をFontawesomeのようなフォントアイコンまたは次のような画像で使用できます。

input[type="checkbox"]:checked:before {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    background: url(check.png) no-repeat center 3px transparent #ff0000;
}
0
Kuba S.

ウィジェットの外観のChrome 81からChrome 83へのこの変更は、p5.jsの私のGuiに本当に悪影響を及ぼしました。 Chrome 81スタイルに戻す方法を見つけましたが、いつまで使用できるかわかりません。これをChromeアドレスバーに配置します。

chrome:// flags /#form-controls-refresh

これは、内部オプションの束を表示します。つまり、Webプラットフォームコントロールの更新されたUIを設定します。あなたが上陸したものを無効にします。その後、ブラウザを再起動する必要があります。これは、上記のひどい明るい青のスライダーを含むすべての「改善」を取り除きます。

情報を提供してくれたRedditのポスターに感謝します。URLを失いました。 (私の環境:Mac、Mojave 10.14.6、Chrome 83.0.4103.106)。 (また、現在は2020年6月25日の時点で83.0.4103.116)。

Ciao e Buona Fortuna。

0
Greg E