Styles and Appearances in Blazor ListBox Component

4 Nov 20253 minutes to read

To modify the ListBox appearance, override the component’s default CSS. The following table lists key CSS classes and the parts of the ListBox they affect. A custom theme can also be generated using the Theme Studio.

CSS Class Purpose of Class
.e-listbox-container Customize the ListBox container.
.e-listbox-container .e-list-item Customize ListBox items.
.e-listbox-container .e-list-item:hover:not(.e-selected):not(.e-disabled) Customize ListBox items on hover.
.e-listbox-container .e-list-item.e-selected Customize the selected item.
.e-listboxtool-container .e-listbox-tool Customize the ListBox toolbar (dual ListBox scenarios).
.e-listboxtool-container .e-listbox-tool .e-btn Customize toolbar buttons.
.e-listboxtool-container .e-listbox-tool .e-btn .e-btn-icon.e-icons::before Customize toolbar icons.

Horizontal ListBox

Use the CssClass property to apply a custom CSS class and display the ListBox horizontally. The sample below applies layout styles via the e-horizontal-listbox class to render items in a single horizontal row.

<div id="listbox-control">
    <h6>Select your favorite car:</h6>
    <SfListBox Value=@Value CssClass="e-horizontal-listbox" DataSource="@Data" TValue="string[]" TItem="DataValues"></SfListBox>
</div>

<style>
    #listbox-control {
        width: 350px;
        margin: auto;
    }
    /* Custom css for horizontal listbox */
    .e-horizontal-listbox .e-list-parent {
        display: inline-flex;
        align-items: center;
    }

    .e-horizontal-listbox {
        overflow-y: hidden;
        height: 100px;
    }

    .e-horizontal-listbox .e-list-parent .e-list-item {
        width: max-content;
        line-height: 100px;
        height: 100px;
    }
</style>

@code{
    public string[] Value = new string[] { "Hennessey Venom" };
    public List<DataValues> Data = new List<DataValues> {
        new DataValues{ text = "Hennessey Venom", id = "list-01" },
        new DataValues{ text = "Bugatti Chiron", id = "list-02" },
        new DataValues{ text = "Bugatti Veyron Super Sport", id = "list-03" },
        new DataValues{ text = "SSC Ultimate Aero", id = "list-04" },
        new DataValues{ text = "Koenigsegg CCR", id = "list-05" },
        new DataValues{ text = "McLaren F1", id = "list-06" },
        new DataValues{ text = "Aston Martin One- 77", id = "list-07" },
        new DataValues{ text = "Jaguar XJ220", id = "list-08" },
        new DataValues{ text = "McLaren P1", id = "list-09" },
        new DataValues{ text = "Ferrari LaFerrari", id = "list-10" }
    };
    public class DataValues
    {
        public string text { get; set; }
        public string id { get; set; }
    }
}

Blazor ListBox displayed horizontally with custom CSS

NOTE

View sample on GitHub