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

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

Susan Sarandon
发布: 2024-11-29 08:42:10
原创
672 人浏览过

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板