New to Kendo UI for Angular? Start a free 30-day trial

Customizing Picker

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-picker-bgColor$kendo-button-bg#f5f5f5
Description
The background color of the Picker components.
$kendo-picker-textColor$kendo-button-text#424242
Description
The text color of the Picker components.
$kendo-picker-borderColor$kendo-button-borderrgba(0, 0, 0, 0.08)
Description
The border color of the Picker components.
$kendo-picker-gradientList$kendo-button-gradientrgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)
Description
The gradient of the Picker components.
$kendo-picker-shadowNull$kendo-button-shadownull
Description
The shadow of the Picker components.
$kendo-picker-hover-bgColor$kendo-button-hover-bg#ebebeb
Description
The background color of the hovered Picker components.
$kendo-picker-hover-textNull$kendo-button-hover-textnull
Description
The text color of the hovered Picker components.
$kendo-picker-hover-borderNull$kendo-button-hover-bordernull
Description
The border color of the hovered Picker components.
$kendo-picker-hover-gradientNull$kendo-button-hover-gradientnull
Description
The gradient of the hovered Picker components.
$kendo-picker-hover-shadowNull$kendo-button-hover-shadownull
Description
The shadow of the hovered Picker components.
$kendo-picker-focus-bgNull$kendo-button-focus-bgnull
Description
The background color of the focused Picker components.
$kendo-picker-focus-textNull$kendo-button-focus-textnull
Description
The text color of the focused Picker components.
$kendo-picker-focus-borderNull$kendo-button-focus-bordernull
Description
The border color of the focused Picker components.
$kendo-picker-focus-gradientNull$kendo-button-focus-gradientnull
Description
The gradient of the focused Picker components.
$kendo-picker-focus-shadowList$kendo-button-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The shadow of the focused Picker components.
$kendo-picker-disabled-bgNullnullnull
Description
The background color of the disabled Picker components.
$kendo-picker-disabled-textNullnullnull
Description
The text color of the disabled Picker components.
$kendo-picker-disabled-borderNullnullnull
Description
The border color of the disabled Picker components.
$kendo-picker-disabled-gradientNullnullnull
Description
The gradient of the disabled Picker components.
$kendo-picker-disabled-shadowNullnullnull
Description
The shadow of the disabled Picker components.
$kendo-picker-outline-bgNullnullnull
Description
The background color of the outline Picker components.
$kendo-picker-outline-textColor$kendo-button-text#424242
Description
The text color of the outline Picker components.
$kendo-picker-outline-borderColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-picker-outline-text, .5))rgba(66, 66, 66, 0.5)
Description
The border color of the outline Picker components.
$kendo-picker-outline-hover-bgColor$kendo-picker-outline-text#424242
Description
The background color of the outline hovered Picker components.
$kendo-picker-outline-hover-textColorif($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg ))white
Description
The text color of the outline hovered Picker components.
$kendo-picker-outline-hover-borderColor$kendo-picker-outline-hover-bg#424242
Description
The border color of the outline hovered Picker components.
$kendo-picker-outline-focus-bgNullnullnull
Description
The background color of the outline focused Picker components.
$kendo-picker-outline-focus-textNullnullnull
Description
The text color of the outline focused Picker components.
$kendo-picker-outline-focus-borderNullnullnull
Description
The border color of the outline focused Picker components.
$kendo-picker-outline-focus-shadowList$kendo-picker-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The shadow of the outline focused Picker components.
$kendo-picker-outline-hover-focus-bgNullnullnull
Description
The background color of the outline hovered and focused Picker components.
$kendo-picker-outline-hover-focus-textNullnullnull
Description
The text color of the outline hovered and focused Picker components.
$kendo-picker-outline-hover-focus-borderNullnullnull
Description
The border color of the outline hovered and focused Picker components.
$kendo-picker-flat-bgNullnullnull
Description
The background color of the flat Picker components.
$kendo-picker-flat-textColor$kendo-button-text#424242
Description
The text color of the flat Picker components.
$kendo-picker-flat-borderColor$kendo-button-borderrgba(0, 0, 0, 0.08)
Description
The border color of the flat Picker components.
$kendo-picker-flat-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-base, true ), .04 ), rgba( $kendo-button-text, .04 ))rgba(66, 66, 66, 0.04)
Description
The background color of the flat hovered Picker components.
$kendo-picker-flat-hover-textNullnullnull
Description
The text color of the flat hovered Picker components.
$kendo-picker-flat-hover-borderColorif($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 ))rgba(0, 0, 0, 0.16)
Description
The border color of the flat hovered Picker components.
$kendo-picker-flat-focus-bgNullnullnull
Description
The background color of the flat focused Picker components.
$kendo-picker-flat-focus-textNullnullnull
Description
The text color of the flat focused Picker components.
$kendo-picker-flat-focus-borderNullnullnull
Description
The border color of the flat focused Picker components.
$kendo-picker-flat-focus-shadowList$kendo-picker-focus-shadow0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The shadow of the flat focused Picker components.
$kendo-picker-flat-hover-focus-bgNullnullnull
Description
The background color of the flat hovered and focused Picker components.
$kendo-picker-flat-hover-focus-textNullnullnull
Description
The text color of the flat hovered and focused Picker components.
$kendo-picker-flat-hover-focus-borderNullnullnull
Description
The border color of the flat hovered and focused Picker components.

In this article

Not finding the help you need?