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

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

Susan Sarandon
リリース: 2024-11-29 08:42:10
オリジナル
658 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート