CSS Structure in JavaScript (ES5) ListView control

The following content provides the exact CSS structure that can be used to modify the control’s appearance based on user preference.

Customizing ListView

Use the following CSS to customize the ListView.

.e-listview {
    border: 5px solid rgb(173, 255, 47);
}

Customizing the list items

Use the following CSS to customize the items of ListView.

.e-listview .e-list-item {
    text-align: center;
    color: pink;
    background-color: #2fa1ff;
}

Customizing ListView’s header

Use the following CSS to customize the header of ListView control.

.e-listview .e-list-header{
    color: #2fa1ff;
    justify-content: center;
}

Customizing group header of ListView

Use the following CSS to customize the category of the group items.

.e-listview .e-list-group-item {
    color: rgb(173, 255, 47);
    background-color: maroon;
    text-align: end;
}

Customizing the hover state of ListView control

Use the following CSS to customize the list item when hovering.

Customizing ListView hover state with the checkbox checked

.e-listview .e-list-item.e-hover.e-active.e-checklist {
    color: rgb(83, 5, 79);
    background-color: rgb(173, 255, 47);
}

Customizing ListView hover state

.e-listview .e-list-item.e-hover {
    color:red;
    background-color: rgb(173, 255, 47);
}

Customizing selected item of ListView control

Use the following CSS to customize the selected list item.

Customizing ListView’s selected item with the checkbox checked

.e-listview .e-list-item.e-checklist.e-focused.e-active {
    color: rgb(83, 5, 79);
    background-color: rgb(0, 15, 100);
}

Customizing ListView’s selected item

.e-listview .e-list-item.e-focused {
    color: #2fa1ff;
    background-color: rgb(0, 15, 100);
}