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

チェックボックスの色の変更のトラブルシューティング

さまざまな CSS スタイルを試したにもかかわらず、チェックボックスの背景色を変更するのが困難でした。最新の Firefox 29 を使用している場合、この動作は特に不可解です。これに対処するために、基礎となる CSS とブラウザーの動作を調べてみましょう。

CSS スタイルシート

指定した CSS には、チェックボックスのスタイルを試行する 2 つのルールが含まれています。

<code class="css">input[type="checkbox"] {
    background: #990000;
}

.chk {
   background-color: #990000;
}</code>

最初のルールは属性セレクターを使用するすべてのチェックボックスを対象とし、2 番目のルールはクラス「chk」を持つ要素を対象とします。どちらの場合も、背景色は #990000 に設定されます。

ブラウザの動作

Firefox は、他のブラウザと同様に、チェックボックスなどのフォーム要素に特定のデフォルト スタイルを実装しています。 。これらのデフォルトのスタイルは CSS ルールをオーバーライドする可能性があるため、チェックボックスの外観を変更することが困難になります。

解決策

この問題を解決するには、アクセントを利用できます。 color プロパティ。チェックボックスを含むさまざまなフォーム要素の色を指定できます。更新された CSS の例は次のとおりです。

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

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

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

この例では、#cb ID 属性を使用してチェックボックス要素に異なるアクセント カラーが割り当てられています。これにより、デフォルトのブラウザ スタイルがオーバーライドされ、必要に応じてチェックボックスの色を変更できるようになります。

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