首页 >web前端 >css教程 >为什么背景颜色不应用于可滚动 Div 中的复选框?

为什么背景颜色不应用于可滚动 Div 中的复选框?

Susan Sarandon
Susan Sarandon原创
2024-11-29 08:42:10660浏览

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn