Rumah > hujung hadapan web > tutorial css > Mengapa Warna Latar Belakang Tidak Digunakan pada Kotak Pilihan dalam Div Boleh Tatal?

Mengapa Warna Latar Belakang Tidak Digunakan pada Kotak Pilihan dalam Div Boleh Tatal?

Susan Sarandon
Lepaskan: 2024-11-29 08:42:10
asal
672 orang telah melayarinya

Why Doesn't Background Color Apply to Checkboxes in a Scrollable Div?

Isu Atribut 'warna latar belakang' CSS dengan Kotak Pilihan dalam Div

Walaupun menetapkan atribut 'warna latar belakang' dalam CSS untuk kotak pilihan dalam div boleh tatal, pengubahsuaian warna latar belakang tidak digunakan. Walau bagaimanapun, atribut lain seperti 'margin-top' berfungsi seperti yang diharapkan.

Kod HTML dan CSS yang pengguna berikan adalah sebagai berikut:

HTML:

<div>
Salin selepas log masuk
Salin selepas log masuk

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;
}
Salin selepas log masuk

Penjelasan:

Isu timbul kerana kotak pilihan tidak menyokong atribut 'warna latar belakang' secara asli. Untuk mencipta kesan visual yang diingini, anda mesti membalut setiap kotak pilihan dalam elemen div dan tetapkan warna pada div tersebut.

HTML yang disemak:

<div>
Salin selepas log masuk
Salin selepas log masuk

CSS yang disemak:

.listContainer {
    /* Same as before */
}

.oddRow, .evenRow {
    /* Remove incorrect background-color */
}

.evenRow {
    background-color: #9FFF9D;
}

.oddRow {
    background-color: #ffffff;
}
Salin selepas log masuk

Atas ialah kandungan terperinci Mengapa Warna Latar Belakang Tidak Digunakan pada Kotak Pilihan dalam Div Boleh Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan