首頁 > web前端 > 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板