CSS でチェックボックスの色を変更できないのはなぜですか?

コードを変更してもチェックボックスの色を変更できないのはなぜですか?

CSS を使用してチェックボックスの背景色をカスタマイズする努力にもかかわらず、ユーザーは目に見える変化が欠けていることに遭遇します。この問題は、Firefox 29 以降で発生しています。

説明

チェックボックスの色を変更できないのは、HTML でこの機能が意図的に省略されていることが原因です。チェックボックスとラジオ ボタンは「ネイティブ」フォーム要素とみなされます。つまり、その外観は CSS ルールではなくブラウザーによって制御されます。ブラウザーはユーザー インターフェイスの一貫性を優先するため、これらの要素にデフォルトの視覚プロパティを適用します。

解決策

この制限を克服してチェックボックスの外観をカスタマイズするには、次のようにします。次の CSS プロパティの利用を検討してください:

<code class="css">accent-color</code>

このプロパティを設定すると、チェック マークと付随する背景を含むチェックボックスに適用されるアクセント カラーを制御できるようになります。以下に例を示します。

<code class="css">#cb1 {
  accent-color: #9b59b6; /* Change the color of the check mark within checkbox #cb1 to blue */
}</code>

デモ

アクセントカラー プロパティを使用してチェックボックスの色が変更される様子を確認するには、以下のデモを参照してください。

<code class="html"><input id="cb1" type="checkbox" checked>
<input id="cb2" type="checkbox" checked>
<input id="cb3" type="checkbox" checked></code>

<code class="css">#cb1 {
  accent-color: #9b59b6;
}

#cb2 {
  accent-color: #34495e;
}

#cb3 {
  accent-color: #e74c3c;
}</code>

以上がCSS でチェックボックスの色を変更できないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。