Progress LogoProgressDesign System
FoundationThemesCSS UtilitiesComponentsResources

Foundation

Themes

CSS Utilities

Components

Resources

DropDownList

DropDownLists render predefined collections of alternatives and allow users to select a single value.

On this page

Sass Variables

The Telerik and Kendo UI DropDownList is a composite UI component that consists of Picker and List elements and a Popup component. To configure and customize the appearance of the DropDownList, modify the Picker and List Sass variables, as well as the Sass variables provided by the Popup component.

Picker Variables

VariableDefault ValueComputed ValueValue
kendo-picker-bg$kendo-button-bgvar(--kendo-color-base, #f5f5f5)Default: $kendo-button-bgComputed: var(--kendo-color-base, #f5f5f5)
Description: The background color of the Picker components.
kendo-picker-text$kendo-button-textvar(--kendo-color-on-base, #3d3d3d)Default: $kendo-button-textComputed: var(--kendo-color-on-base, #3d3d3d)
Description: The text color of the Picker components.
kendo-picker-border$kendo-button-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-button-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the Picker components.
kendo-picker-gradient$kendo-button-gradientnullDefault: $kendo-button-gradientComputed: null
Description: The gradient of the Picker components.
kendo-picker-shadow$kendo-button-shadownullDefault: $kendo-button-shadowComputed: null
Description: The shadow of the Picker components.
kendo-picker-hover-bg$kendo-button-hover-bgvar(--kendo-color-base-hover, #ebebeb)Default: $kendo-button-hover-bgComputed: var(--kendo-color-base-hover, #ebebeb)
Description: The background color of the hovered Picker components.
kendo-picker-hover-text$kendo-button-hover-textnullDefault: $kendo-button-hover-textComputed: null
Description: The text color of the hovered Picker components.
kendo-picker-hover-border$kendo-button-hover-bordernullDefault: $kendo-button-hover-borderComputed: null
Description: The border color of the hovered Picker components.
kendo-picker-hover-gradient$kendo-button-hover-gradientnullDefault: $kendo-button-hover-gradientComputed: null
Description: The gradient of the hovered Picker components.
kendo-picker-hover-shadow$kendo-button-hover-shadownullDefault: $kendo-button-hover-shadowComputed: null
Description: The shadow of the hovered Picker components.
kendo-picker-focus-bg$kendo-button-focus-bgnullDefault: $kendo-button-focus-bgComputed: null
Description: The background color of the focused Picker components.
kendo-picker-focus-text$kendo-button-focus-textnullDefault: $kendo-button-focus-textComputed: null
Description: The text color of the focused Picker components.
kendo-picker-focus-border$kendo-button-focus-bordernullDefault: $kendo-button-focus-borderComputed: null
Description: The border color of the focused Picker components.
kendo-picker-focus-gradient$kendo-button-focus-gradientnullDefault: $kendo-button-focus-gradientComputed: null
Description: The gradient of the focused Picker components.
kendo-picker-focus-shadow$kendo-button-focus-shadow0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)Default: $kendo-button-focus-shadowComputed: 0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)
Description: The shadow of the focused Picker components.
kendo-picker-disabled-bgnullnullDefault: nullComputed: null
Description: The background color of the disabled Picker components.
kendo-picker-disabled-textnullnullDefault: nullComputed: null
Description: The text color of the disabled Picker components.
kendo-picker-disabled-bordernullnullDefault: nullComputed: null
Description: The border color of the disabled Picker components.
kendo-picker-disabled-gradientnullnullDefault: nullComputed: null
Description: The gradient of the disabled Picker components.
kendo-picker-disabled-shadownullnullDefault: nullComputed: null
Description: The shadow of the disabled Picker components.
kendo-picker-outline-bgnullnullDefault: nullComputed: null
Description: The background color of the outline Picker components.
kendo-picker-outline-text$kendo-button-textvar(--kendo-color-on-base, #3d3d3d)Default: $kendo-button-textComputed: var(--kendo-color-on-base, #3d3d3d)
Description: The text color of the outline Picker components.
kendo-picker-outline-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5))color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent)Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5))Computed: color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent)
Description: The border color of the outline Picker components.
kendo-picker-outline-hover-bg$kendo-picker-outline-textvar(--kendo-color-on-base, #3d3d3d)Default: $kendo-picker-outline-textComputed: var(--kendo-color-on-base, #3d3d3d)
Description: The background color of the outline hovered Picker components.
kendo-picker-outline-hover-textif($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg ))var(--kendo-color-base, #f5f5f5)Default: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg ))Computed: var(--kendo-color-base, #f5f5f5)
Description: The text color of the outline hovered Picker components.
kendo-picker-outline-hover-border$kendo-picker-outline-hover-bgvar(--kendo-color-on-base, #3d3d3d)Default: $kendo-picker-outline-hover-bgComputed: var(--kendo-color-on-base, #3d3d3d)
Description: The border color of the outline hovered Picker components.
kendo-picker-outline-focus-bgnullnullDefault: nullComputed: null
Description: The background color of the outline focused Picker components.
kendo-picker-outline-focus-textnullnullDefault: nullComputed: null
Description: The text color of the outline focused Picker components.
kendo-picker-outline-focus-bordernullnullDefault: nullComputed: null
Description: The border color of the outline focused Picker components.
kendo-picker-outline-focus-shadow$kendo-picker-focus-shadow0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)Default: $kendo-picker-focus-shadowComputed: 0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)
Description: The shadow of the outline focused Picker components.
kendo-picker-outline-hover-focus-bgnullnullDefault: nullComputed: null
Description: The background color of the outline hovered and focused Picker components.
kendo-picker-outline-hover-focus-textnullnullDefault: nullComputed: null
Description: The text color of the outline hovered and focused Picker components.
kendo-picker-outline-hover-focus-bordernullnullDefault: nullComputed: null
Description: The border color of the outline hovered and focused Picker components.
kendo-picker-flat-bgnullnullDefault: nullComputed: null
Description: The background color of the flat Picker components.
kendo-picker-flat-text$kendo-button-textvar(--kendo-color-on-base, #3d3d3d)Default: $kendo-button-textComputed: var(--kendo-color-on-base, #3d3d3d)
Description: The text color of the flat Picker components.
kendo-picker-flat-border$kendo-button-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-button-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the flat Picker components.
kendo-picker-flat-hover-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 ))color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 4%, transparent)Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 ))Computed: color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 4%, transparent)
Description: The background color of the flat hovered Picker components.
kendo-picker-flat-hover-textnullnullDefault: nullComputed: null
Description: The text color of the flat hovered Picker components.
kendo-picker-flat-hover-borderif($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 ))var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16))Default: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 ))Computed: var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16))
Description: The border color of the flat hovered Picker components.
kendo-picker-flat-focus-bgnullnullDefault: nullComputed: null
Description: The background color of the flat focused Picker components.
kendo-picker-flat-focus-textnullnullDefault: nullComputed: null
Description: The text color of the flat focused Picker components.
kendo-picker-flat-focus-bordernullnullDefault: nullComputed: null
Description: The border color of the flat focused Picker components.
kendo-picker-flat-focus-shadow$kendo-picker-focus-shadow0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)Default: $kendo-picker-focus-shadowComputed: 0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)
Description: The shadow of the flat focused Picker components.
kendo-picker-flat-hover-focus-bgnullnullDefault: nullComputed: null
Description: The background color of the flat hovered and focused Picker components.
kendo-picker-flat-hover-focus-textnullnullDefault: nullComputed: null
Description: The text color of the flat hovered and focused Picker components.
kendo-picker-flat-hover-focus-bordernullnullDefault: nullComputed: null
Description: The border color of the flat hovered and focused Picker components.

List Variables

VariableDefault ValueComputed ValueValue
kendo-list-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the List components.
kendo-list-font-sizenullnullDefault: nullComputed: null
Description: The font size of the List component, if no size is set.
kendo-list-line-heightnullnullDefault: nullComputed: null
Description: The line height of the List component, if no size is set.
kendo-list-header-padding-xnullnullDefault: nullComputed: null
Description: The horizontal padding of the List header, if no size is set.
kendo-list-header-padding-ynullnullDefault: nullComputed: null
Description: The vertical padding of the List header, if no size is set.
kendo-list-header-border-width0 0 1px0 0 1pxDefault: 0 0 1pxComputed: 0 0 1px
Description: The border width of the List header.
kendo-list-header-font-sizenullnullDefault: nullComputed: null
Description: The font size of the List header, if no size is set.
kendo-list-header-line-heightnullnullDefault: nullComputed: null
Description: The line height of the List header, if no size is set.
kendo-list-header-font-weightvar( --kendo-font-weight-bold, normal )var(--kendo-font-weight-bold, normal)Default: var( --kendo-font-weight-bold, normal )Computed: var(--kendo-font-weight-bold, normal)
Description: The font weight of the List header.
kendo-list-item-padding-xnullnullDefault: nullComputed: null
Description: The horizontal padding of the List items, when no size is set.
kendo-list-item-padding-ynullnullDefault: nullComputed: null
Description: The vertical padding of the List items, when no size is set.
kendo-list-item-font-sizenullnullDefault: nullComputed: null
Description: The font size of the List items, if no size is set.
kendo-list-item-line-heightnullnullDefault: nullComputed: null
Description: The line height of the List items, if no size is set.
kendo-list-group-item-padding-xnullnullDefault: nullComputed: null
Description: The horizontal padding of the List group items, when no size is set.
kendo-list-group-item-padding-ynullnullDefault: nullComputed: null
Description: The vertical padding of the List group items, when no size is set.
kendo-list-group-item-border-width1px 0 01px 0 0Default: 1px 0 0Computed: 1px 0 0
Description: The border width of the List group items.
kendo-list-group-item-font-sizenullnullDefault: nullComputed: null
Description: The font size of the List group items, if no size is set.
kendo-list-group-item-line-heightnullnullDefault: nullComputed: null
Description: The line height of the List group items, if no size is set.
kendo-list-group-item-font-weightvar( --kendo-font-weight-bold, normal )var(--kendo-font-weight-bold, normal)Default: var( --kendo-font-weight-bold, normal )Computed: var(--kendo-font-weight-bold, normal)
Description: The font weight of a List group item.
kendo-list-sizes( sm: ( font-size: $kendo-list-sm-font-size, line-height: $kendo-list-sm-line-height, header-padding-x: $kendo-list-sm-header-padding-x, header-padding-y: $kendo-list-sm-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-sm-item-padding-x, item-padding-y: $kendo-list-sm-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-sm-group-item-padding-x, group-item-padding-y: $kendo-list-sm-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ), md: ( font-size: $kendo-list-md-font-size, line-height: $kendo-list-md-line-height, header-padding-x: $kendo-list-md-header-padding-x, header-padding-y: $kendo-list-md-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-md-item-padding-x, item-padding-y: $kendo-list-md-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-md-group-item-padding-x, group-item-padding-y: $kendo-list-md-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ), lg: ( font-size: $kendo-list-lg-font-size, line-height: $kendo-list-lg-line-height, header-padding-x: $kendo-list-lg-header-padding-x, header-padding-y: $kendo-list-lg-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-lg-item-padding-x, item-padding-y: $kendo-list-lg-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-lg-group-item-padding-x, group-item-padding-y: $kendo-list-lg-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ) )(sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-0\.5, 0.125rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-0\.5, 0.125rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-0\.5, 0.125rem), group-item-font-size: null, group-item-line-height: null), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-1, 0.25rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-1, 0.25rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-1, 0.25rem), group-item-font-size: null, group-item-line-height: null), lg: (font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-1\.5, 0.375rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-2, 0.5rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-1\.5, 0.375rem), group-item-font-size: null, group-item-line-height: null))Default: ( sm: ( font-size: $kendo-list-sm-font-size, line-height: $kendo-list-sm-line-height, header-padding-x: $kendo-list-sm-header-padding-x, header-padding-y: $kendo-list-sm-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-sm-item-padding-x, item-padding-y: $kendo-list-sm-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-sm-group-item-padding-x, group-item-padding-y: $kendo-list-sm-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ), md: ( font-size: $kendo-list-md-font-size, line-height: $kendo-list-md-line-height, header-padding-x: $kendo-list-md-header-padding-x, header-padding-y: $kendo-list-md-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-md-item-padding-x, item-padding-y: $kendo-list-md-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-md-group-item-padding-x, group-item-padding-y: $kendo-list-md-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ), lg: ( font-size: $kendo-list-lg-font-size, line-height: $kendo-list-lg-line-height, header-padding-x: $kendo-list-lg-header-padding-x, header-padding-y: $kendo-list-lg-header-padding-y, header-font-size: null, header-line-height: null, item-padding-x: $kendo-list-lg-item-padding-x, item-padding-y: $kendo-list-lg-item-padding-y, item-font-size: null, item-line-height: null, group-item-padding-x: $kendo-list-lg-group-item-padding-x, group-item-padding-y: $kendo-list-lg-group-item-padding-y, group-item-font-size: null, group-item-line-height: null ) )Computed: (sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-0\.5, 0.125rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-0\.5, 0.125rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-0\.5, 0.125rem), group-item-font-size: null, group-item-line-height: null), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-1, 0.25rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-1, 0.25rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-1, 0.25rem), group-item-font-size: null, group-item-line-height: null), lg: (font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-1\.5, 0.375rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-2, 0.5rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-1\.5, 0.375rem), group-item-font-size: null, group-item-line-height: null))
Description: The map with the sizes of the List.
kendo-list-bg$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff)
Description: The background color of the List component.
kendo-list-text$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the List component.
kendo-list-border$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the List component.
kendo-list-header-bgnullnullDefault: nullComputed: null
Description: The background color of the List header.
kendo-list-header-textnullnullDefault: nullComputed: null
Description: The text color of the List header.
kendo-list-header-borderinheritinheritDefault: inheritComputed: inherit
Description: The border color of the List header.
kendo-list-header-shadowk-elevation(2)var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))Default: k-elevation(2)Computed: var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))
Description: The box shadow of the List header.
kendo-list-item-bgnullnullDefault: nullComputed: null
Description: The background color of the List items.
kendo-list-item-textnullnullDefault: nullComputed: null
Description: The text color of the List items.
kendo-list-item-hover-bg$kendo-hover-bgvar(--kendo-color-base-hover, #ebebeb)Default: $kendo-hover-bgComputed: var(--kendo-color-base-hover, #ebebeb)
Description: The background color of the hovered List items.
kendo-list-item-hover-text$kendo-hover-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-hover-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the hovered List items.
kendo-list-item-focus-bgnullnullDefault: nullComputed: null
Description: The background color of the focused List items.
kendo-list-item-focus-textnullnullDefault: nullComputed: null
Description: The text color of the focused List items.
kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, .12)inset 0 0 0 2px rgba(0, 0, 0, 0.12)Default: inset 0 0 0 2px rgba(0, 0, 0, .12)Computed: inset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description: The box shadow of the focused List items.
kendo-list-item-selected-bg$kendo-selected-bgvar(--kendo-color-primary, #ff6358)Default: $kendo-selected-bgComputed: var(--kendo-color-primary, #ff6358)
Description: The background color of the selected List items.
kendo-list-item-selected-text$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)Default: $kendo-selected-textComputed: var(--kendo-color-on-primary, #ffffff)
Description: The text color of the selected List items.
kendo-list-group-item-bgnullnullDefault: nullComputed: null
Description: The background color of the List group items.
kendo-list-group-item-textnullnullDefault: nullComputed: null
Description: The text color of the List group items.
kendo-list-group-item-borderinheritinheritDefault: inheritComputed: inherit
Description: The border color of the List group items.
kendo-list-group-item-shadownullnullDefault: nullComputed: null
Description: The base shadow of the List group items.
kendo-list-no-data-text$kendo-subtle-textvar(--kendo-color-subtle, #666666)Default: $kendo-subtle-textComputed: var(--kendo-color-subtle, #666666)
Description: The color of the 'No Data' text.
kendo-list-option-label-text$kendo-subtle-textvar(--kendo-color-subtle, #666666)Default: $kendo-subtle-textComputed: var(--kendo-color-subtle, #666666)
Description: The color of the 'Option Label' text.

On this page

Progress Logo

Copyright © 2023, Progress Software Corporation and/or its subsidiaries or affiliates.
All Rights Reserved.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.

Terms of UsePrivacy CenterSecurity
Center TrademarksLicense Agreements
Code of ConductDoc Copyright