CSS“”背景颜色“属性无法在< div> [英] CSS ''background-color" attribute not working on checkbox inside <div>

问题描述

标题几乎解释了它。我有一个可滚动div内的几个复选框。但是由于某些原因，'background-color'属性不起作用。虽然'margin-top'似乎工作...

The heading pretty much explains it. I have a couple of checkboxes inside a scrollable div. But for some reasons the 'background-color' attribute doesn't work. Although the 'margin-top' does seem to work...

只是困惑我如何一个属性可以工作，另一个不是。这也不是像div有它自己的一套背景颜色属性，可能会覆盖复选框的属性。

Just puzzling me how one attribute can work and another not. It's also not like the div has it's own set of background color attributes that could potentially over ride the checkboxes attributes.

无论如何，下面是我的HTML ）：

Anyways, below is my HTML (which is generated by JSP):

<div class="listContainer">
    <input type="checkbox" class="oddRow">item1<br/>
    <input type="checkbox" class="evenRow">item2<br/>
    <input type="checkbox" class="oddRow">item3<br/>
    <input type="checkbox" class="evenRow">item4<br/>
    ...
</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;
        }

提前感谢任何可以指向我的人。 p>

Thanks in advance for anyone that can point me in the right direction!

推荐答案

复选框没有背景颜色，
你可能想要做的是包装每个复选框，颜色。
你的输出应该是这样的：

A checkbox does not have background color, what you might want to do is wrap each checkbox with a div that has the color. your output should be something like this:

<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>
<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>

这篇关于CSS“”背景颜色“属性无法在< div>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！