How to customize the default styles of checkboxes in ListView

[Syncfusion Support]

Answer:

We can achieve this by overriding the default checkbox styles, Also we have used cssClass property for this customization.

<EjsListView Enable="true" ID="listview" DataSource="@Data" ShowCheckBox="true" CssClass="e-custom-class">

<ListViewFieldSettings Id="ID" Text="Text">ListViewFieldSettings>

EjsListView>

@code{

DataModel[] Data =

{

new DataModel { Text = "Hennessey Venom", ID = "list-01" },

new DataModel { Text = "Bugatti Chiron", ID = "list-02" },

new DataModel { Text = "Bugatti Veyron Super Sport", ID = "list-03" },

new DataModel { Text = "SSC Ultimate Aero", ID = "list-04" }

};

class DataModel

{

public string Text { get; set; }

public string ID { get; set; }

public string Category { get; set; }

}

}

<style>

.e-listview.e-custom-class .e-active .e-check,

.e-listview.e-custom-class .e-active.e-checklist.e-focused .e-checkbox-wrapper .e-check {

background-color: #1565C0

}

style>