スクロール DIV 内でチェックボックスの背景色が変化しないのはなぜですか?

CSS の「background-color」属性が

内のチェックボックスで機能しない

含まれるチェックボックスに背景色を適用しようとしたときスクロール

内で、「background-color」属性が表示される問題が発生する可能性があります。効果はありません。逆説的ですが、「margin-top」などの他の CSS 属性は期待どおりに機能します。

この矛盾は、チェックボックスには背景色を表示する機能がネイティブにないために発生します。目的の効果を実現するには、各チェックボックスを

で囲みます。

改訂された CSS の例:

.listContainer {
  border: 2px solid #CCC;
  width: 340px;
  height: 225px;
  overflow-y: scroll;
  margin-top: 20px;
  padding-left: 10px;
}

.oddRow,
.evenRow {
  margin-top: 5px;
}

.oddRow {
  border: 1px solid #333;
  background-color: #FFFFFF;
}

.evenRow {
  border: 1px solid #333;
  background-color: #9FFF9D;
}

改訂された HTML の例:

<div>
<p>各チェックボックスを </p>
<div> で囲みます。適切な背景色を使用すると、背景色に関するチェックボックスの固有の制限を回避して、目的の視覚効果を実現できます。</div>
</div>

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