Chrome 93 から input の色を揃えられる
◆ 標準のチェックボックスなどの input は Chrome と Edge で色が異なる
◆ accent-color で色を指定できるようになる
◆ select や input[type="date"] などポップアップの中の選択中の色は変わらないみたい
◆ accent-color で色を指定できるようになる
◆ select や input[type="date"] などポップアップの中の選択中の色は変わらないみたい
以前にこのあたりの記事書きましたが input の color は Chrome と Edge で異なります
チェックボックスやラジオボタンのチェック時の背景色やカレンダーなどの選択箇所の色や range バーのバーの色などです
Chrome は青色
Edge は黒色です
ときどき背景のデザインの都合で色を変えたいなー とか揃えたいなー と思うことがありました
ですが 標準の見た目そのままに色だけを変える機能はなさそうでした
完全に独自の見た目にするなら可能ですが チェックボックスなどを自作は面倒ですし それだけのためにサードパーティのライブラリを入れる気もしません
それが 93 から標準機能で変更可能になりました
CSS で accent-color に色を指定します
これで色が変わります
……が カレンダーやセレクトボックスの中の選択中の部分はもとの青色のままでした
ポップアップの中なので他に比べると 色の影響は少ないですが Chrome と Edge で違う以上揃えることはできてほしかったです
チェックボックスやラジオボタンのチェック時の背景色やカレンダーなどの選択箇所の色や range バーのバーの色などです
Chrome は青色
Edge は黒色です
ときどき背景のデザインの都合で色を変えたいなー とか揃えたいなー と思うことがありました
ですが 標準の見た目そのままに色だけを変える機能はなさそうでした
完全に独自の見た目にするなら可能ですが チェックボックスなどを自作は面倒ですし それだけのためにサードパーティのライブラリを入れる気もしません
それが 93 から標準機能で変更可能になりました
CSS で accent-color に色を指定します
input {
accent-color: green;
}
これで色が変わります
……が カレンダーやセレクトボックスの中の選択中の部分はもとの青色のままでした
ポップアップの中なので他に比べると 色の影響は少ないですが Chrome と Edge で違う以上揃えることはできてほしかったです