ホームページ >ウェブフロントエンド >CSSチュートリアル >スクロール可能な Div のチェックボックスに背景色が適用されないのはなぜですか?

スクロール可能な Div のチェックボックスに背景色が適用されないのはなぜですか?

Susan Sarandon
Susan Sarandonオリジナル
2024-11-29 08:42:10723ブラウズ

Why Doesn't Background Color Apply to Checkboxes in a Scrollable Div?

Div 内のチェックボックスに関する CSS 'background-color' 属性の問題

CSS でチェックボックスの 'background-color' 属性を設定しているにもかかわらずスクロール可能な div 内では、背景色の変更は適用されません。ただし、「margin-top」などの他の属性は期待どおりに機能します。

ユーザーが指定した HTML および CSS コードは次のとおりです。以下:

HTML:

<div>

CSS:

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

.oddRow {
    margin-top: 5px;
    background-color: #ffffff;
}

.evenRow{
    margin-top: 5px;
    background-color: #9FFF9D;
}

説明:

この問題は、チェックボックスがネイティブでサポートしていないために発生します。 「背景色」属性。目的の視覚効果を作成するには、各チェックボックスを div 要素内でラップし、代わりにその div に色を割り当てる必要があります。

改訂版 HTML:

<div>

改訂された CSS:

.listContainer {
    /* Same as before */
}

.oddRow, .evenRow {
    /* Remove incorrect background-color */
}

.evenRow {
    background-color: #9FFF9D;
}

.oddRow {
    background-color: #ffffff;
}

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。