CSS“背景色"属性不适用于 <div> 内的复选框 [英] CSS ''background-color" attribute not working on checkbox inside <div>

问题描述

标题几乎解释了它.我在可滚动的 div 中有几个复选框.但由于某些原因，'background-color' 属性不起作用.尽管边缘顶部"似乎确实有效...

只是让我困惑一个属性如何起作用而另一个属性不起作用.div 也没有自己的一组背景颜色属性，这些属性可能会覆盖复选框属性.

无论如何，下面是我的 HTML(由 JSP 生成):

<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/>...

这是我的 CSS:

.listContainer {边框:2px 实心 #ccc;宽度:340px；高度:225px；溢出-y:滚动；边距顶部:20px；左边距:10px；}.oddRow {边距顶部:5px；背景色:#ffffff；}.evenRow{边距顶部:5px；背景色:#9FFF9D；}

提前感谢任何可以为我指明正确方向的人！

解决方案

复选框没有背景色.

但是要添加效果，您可以用带有颜色的 div 包裹每个复选框:

<输入类型=复选框"/>
<div class="oddRow"><输入类型=复选框"/>

<div class="evenRow"><输入类型=复选框"/>

<div class="oddRow"><输入类型=复选框"/>

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...

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.

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>

And here is my 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;
        }

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

解决方案

A checkbox does not have background color.

But to add the effect, you may wrap each checkbox with a div that has color:

<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屋！