New to Kendo UI for AngularStart a free 30-day trial

Customizing Listbox

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-listbox-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing between the ListBox elements.
$kendo-listbox-button-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing between the ListBox buttons.
$kendo-listbox-widthNumber10em10em
Description
The width of the ListBox.
$kendo-listbox-default-heightNumber200px200px
Description
The height of the ListBox.
$kendo-listbox-border-widthNumber1px1px
Description
The width of the border around the ListBox.
$kendo-listbox-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the ListBox.
$kendo-listbox-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the ListBox.
$kendo-listbox-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the ListBox.
$kendo-listbox-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the ListBox.
$kendo-listbox-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the ListBox.
$kendo-listbox-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the ListBox.
$kendo-listbox-item-padding-xNullnullnull
Description
The inline padding of the ListBox item.
$kendo-listbox-item-padding-yNullnullnull
Description
The block padding of the ListBox item.
$kendo-listbox-drop-hint-widthNumber1px1px
Description
The width of the ListBox drop hint.
$kendo-listbox-drop-hint-border-widthNullnullnull
Description
The width of the border around the ListBox drop hint.
In this article
VariablesSuggested Links
Not finding the help you need?
Contact Support