[CSS]チェックボックスの中の色を変更したい

Question

質問を読んでくださりありがとうございます。
現在CSSでチェックの有無によってチェックボックスの中の色の変更を試みております。

↓こちらがチェック前

↓こちらがチェック後

チェックしたことによって、中の色を変えるというのがどうしてもできません。。
どなたか知見がありましたら何卒よろしくお願い致します。

Comments

[int32_t]

チェック後の青い部分の色を変えたい、という意味でしょうか?
チェック前の白い部分も変えたいのですか?

[buffalotech]

ご質問ありがとうございます。
チェック後の青い部分の色のみ変えたいです、チェック前の白い部分はデフォルト設定のままで考えております。

[yambejp]

svgで自由に変える手もありますね

Answer 1

青い部分の色を変えたいだけなら、accent-color プロパティで可能です。ただし、Safari 15.1 は未対応で、おそらく Safari 16 から対応すると思われます。

<input type=checkbox style="accent-color: red">

accent-color で不十分な場合は、他の回答にあるように appearnace: none -webkit-appearance: none を適用して自分ですべて描画する必要があります。

Comments

[buffalotech]

簡単に変更することができました！
ご回答いただきありがとうございました。

Answer 2

チェックボックス自体の色はブラウザ依存なので、変更することはできないですね。

疑似要素を使って、枠やチェックマークを作成する方法が一般的です。

「css チェックボックス 色変更」などをキーワードにWEB検索すればサンプルは多数見つかります。

例えば、

CSSでチェックボックスの色や形をデザインする方法 | キノコログ

Comments

[buffalotech]

ご回答いただきありがとうございます。
ブラウザごとで上手くいかない場合、こちらを参考にさせていただきます。

Answer 3

「チェックボックス デザイン css」
で検索するといろいろ出てきますのでお好きなのをどうぞ。
例）
https://kodocode.net/design-css-checkbox/

Comments

[buffalotech]

ご回答いただきありがとうございます。
こちらのサイトも参考にさせていただきます！

Answer 4

検索するだけですぐに出てきますよ
https://kinocolog.com/css_checkbox/

https://www.conifer.jp/csstest/color-radio-checkbox/index.html

Comments

[buffalotech]

ご回答いただきありがとうございます。
参考にさせていただきます！