Styling & Themes / Fluent Theme / Customizing Input / 
New to Kendo UI for Angular? Start a free 30-day trial

Customizing Input

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-input-width100%
Description
The width of the Input components.
$kendo-input-border-width1px
Description
The width of the border around the Input components.
$kendo-input-border-height( $kendo-input-border-width * 2 )
Description
The height of the border around the Input components.
$kendo-input-sm-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the small Input components.
$kendo-input-md-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the medium Input components.
$kendo-input-lg-padding-xmap.get( $kendo-spacing, 2 )
Description
The horizontal padding of the large Input components.
$kendo-input-sm-padding-ymap.get( $kendo-spacing, 1 )
Description
The vertical padding of the small Input components.
$kendo-input-md-padding-ymap.get( $kendo-spacing, 1.5 )
Description
The vertical padding of the medium Input components.
$kendo-input-lg-padding-ymap.get( $kendo-spacing, 2 )
Description
The vertical padding of the large Input components.
$kendo-input-sm-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the small Input components.
$kendo-input-md-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the medium Input components.
$kendo-input-lg-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the large Input components.
$kendo-input-sm-line-heightvar( --kendo-line-height, normal )
Description
The line height of the small Input components.
$kendo-input-md-line-heightvar( --kendo-line-height, normal )
Description
The line height of the medium Input components.
$kendo-input-lg-line-heightvar( --kendo-line-height, normal )
Description
The line height of the large Input components.
$kendo-input-sm-button-widthcalc( #{$kendo-button-sm-line-height} * 1em + #{$kendo-button-sm-padding-y} * 2 )
Description
The width of the small Input button.
$kendo-input-md-button-widthcalc( #{$kendo-button-md-line-height} * 1em + #{$kendo-button-md-padding-y} * 2 )
Description
The width of the medium Input button.
$kendo-input-lg-button-widthcalc( #{$kendo-button-lg-line-height} * 1em + #{$kendo-button-lg-padding-y} * 2 )
Description
The width of the large Input button.
$kendo-input-button-border-width1px
Description
The border width of the Input button.
$kendo-input-sm-spinner-width$kendo-input-sm-button-width
Description
The width of the small Input spinner button.
$kendo-input-md-spinner-width$kendo-input-md-button-width
Description
The width of the medium Input spinner button.
$kendo-input-lg-spinner-width$kendo-input-lg-button-width
Description
The width of the large Input spinner button.
$kendo-input-spinner-icon-offsetnull
Description
The icon offset of the Input spinner button.
$kendo-input-solid-textk-get-theme-color-var( neutral-160 )
Description
The text color of the solid Input components.
$kendo-input-solid-bg$kendo-color-white
Description
The background color of the solid Input components.
$kendo-input-solid-borderk-get-theme-color-var( neutral-130 )
Description
The border color of the solid Input components.
$kendo-input-solid-hover-textk-get-theme-color-var( neutral-190 )
Description
The text color of the hovered solid Input components.
$kendo-input-solid-hover-bg$kendo-input-solid-bg
Description
The background color of the hovered solid Input components.
$kendo-input-solid-hover-borderk-get-theme-color-var( neutral-160 )
Description
The border color of the hovered solid Input components.
$kendo-input-solid-focus-text$kendo-input-solid-text
Description
The text color of the focused solid Input components.
$kendo-input-solid-focus-bg$kendo-input-solid-bg
Description
The background color of the focused solid Input components.
$kendo-input-solid-focus-borderk-get-theme-color-var( primary-100 )
Description
The border color of the focused solid Input components.
$kendo-input-solid-hover-focus-text$kendo-input-solid-focus-text
Description
The text color of the hovered and focused solid Input components.
$kendo-input-solid-hover-focus-bg$kendo-input-solid-focus-bg
Description
The background color of the hovered and focused solid Input components.
$kendo-input-solid-hover-focus-border$kendo-input-solid-focus-border
Description
The border color of the hovered and focused solid Input components.
$kendo-input-solid-disabled-text$kendo-disabled-text
Description
The text color of the disabled solid Input components.
$kendo-input-solid-disabled-bg$kendo-disabled-bg
Description
The background color of the disabled solid Input components.
$kendo-input-solid-disabled-border$kendo-disabled-border
Description
The border color of the disabled solid Input components.
$kendo-input-outline-textk-get-theme-color-var( neutral-160 )
Description
The text color of the outline Input components.
$kendo-input-outline-bg$kendo-color-white
Description
The background color of the outline Input components.
$kendo-input-outline-borderk-get-theme-color-var( neutral-130 )
Description
The border color of the outline Input components.
$kendo-input-outline-hover-textk-get-theme-color-var( neutral-190 )
Description
The text color of the hovered outline Input components.
$kendo-input-outline-hover-bg$kendo-color-white
Description
The background color of the hovered outline Input components.
$kendo-input-outline-hover-borderk-get-theme-color-var( neutral-160 )
Description
The border color of the hovered outline Input components.
$kendo-input-outline-focus-textk-get-theme-color-var( neutral-160 )
Description
The text color of the focused outline Input components.
$kendo-input-outline-focus-bg$kendo-color-white
Description
The background color of the focused outline Input components.
$kendo-input-outline-focus-borderk-get-theme-color-var( primary-100 )
Description
The border color of the focused outline Input components.
$kendo-input-outline-hover-focus-text$kendo-input-outline-focus-text
Description
The text color of the hovered and focused outline Input components.
$kendo-input-outline-hover-focus-bg$kendo-input-outline-focus-bg
Description
The background color of the hovered and focused outline Input components.
$kendo-input-outline-hover-focus-border$kendo-input-outline-focus-border
Description
The border color of the hovered and focused outline Input components.
$kendo-input-outline-disabled-text$kendo-disabled-text
Description
The text color of the disabled outline Input components.
$kendo-input-outline-disabled-bgnone
Description
The background color of the disabled outline Input components.
$kendo-input-outline-disabled-border$kendo-disabled-text
Description
The border color of the disabled outline Input components.
$kendo-input-flat-textk-get-theme-color-var( neutral-160 )
Description
The text color of the flat Input components.
$kendo-input-flat-bg$kendo-color-white
Description
The background color of the flat Input components.
$kendo-input-flat-borderk-get-theme-color-var( neutral-130 )
Description
The border color of the flat Input components.
$kendo-input-flat-hover-textk-get-theme-color-var( neutral-190 )
Description
The text color of the hovered flat Input components.
$kendo-input-flat-hover-bg$kendo-color-white
Description
The background color of the hovered flat Input components.
$kendo-input-flat-hover-borderk-get-theme-color-var( neutral-160 )
Description
The border color of the hovered flat Input components.
$kendo-input-flat-focus-textk-get-theme-color-var( neutral-160 )
Description
The text color of the focused flat Input components.
$kendo-input-flat-focus-bg$kendo-color-white
Description
The background color of the focused flat Input components.
$kendo-input-flat-focus-borderk-get-theme-color-var( primary-100 )
Description
The border color of the focused flat Input components.
$kendo-input-flat-hover-focus-text$kendo-input-flat-focus-text
Description
The text color of the hovered and focused flat Input components.
$kendo-input-flat-hover-focus-bg$kendo-input-flat-focus-bg
Description
The background color of the hovered and focused flat Input components.
$kendo-input-flat-hover-focus-border$kendo-input-flat-focus-border
Description
The border color of the hovered and focused flat Input components.
$kendo-input-flat-disabled-text$kendo-disabled-text
Description
The text color of the disabled flat Input components.
$kendo-input-flat-disabled-bgnone
Description
The background color of the disabled flat Input components.
$kendo-input-flat-disabled-border$kendo-disabled-text
Description
The border color of the disabled flat Input components.
$kendo-picker-solid-textk-get-theme-color-var( neutral-160 )
Description
The text color of the solid Picker components.
$kendo-picker-solid-bg$kendo-color-white
Description
The background color of the solid Picker components.
$kendo-picker-solid-borderk-get-theme-color-var( neutral-130 )!default
Description
The border color of the solid Picker components.
$kendo-picker-solid-hover-textk-get-theme-color-var( neutral-190 )
Description
The text color of the hovered solid Picker components.
$kendo-picker-solid-hover-bg$kendo-color-white
Description
The background color of hovered the solid Picker components.
$kendo-picker-solid-hover-borderk-get-theme-color-var( neutral-160 )
Description
The border color of the hovered solid Picker components.
$kendo-picker-solid-focus-textk-get-theme-color-var( neutral-160 )
Description
The text color of the focused solid Picker components.
$kendo-picker-solid-focus-bg$kendo-color-white
Description
The background color of the focused solid Picker components.
$kendo-picker-solid-focus-borderk-get-theme-color-var( primary-100 )
Description
The border color of the focused solid Picker components.
$kendo-picker-solid-hover-focus-text$kendo-picker-solid-focus-text
Description
The text color of the hovered and focused solid Picker components.
$kendo-picker-solid-hover-focus-bg$kendo-picker-solid-focus-bg
Description
The background color of the hovered and focused solid Picker components.
$kendo-picker-solid-hover-focus-border$kendo-picker-solid-focus-border
Description
The border color of the hovered and focused solid Picker components.
$kendo-picker-solid-disabled-text$kendo-disabled-text
Description
The text color of the disabled solid Picker components.
$kendo-picker-solid-disabled-bgk-get-theme-color-var( neutral-30 )
Description
The background color of the disabled solid Picker components.
$kendo-picker-solid-disabled-border$kendo-disabled-border
Description
The border color of the disabled solid Picker components.
$kendo-picker-outline-textk-get-theme-color-var( neutral-160 )
Description
The text color of the outline Picker components.
$kendo-picker-outline-bgnone
Description
The background color of the outline Picker components.
$kendo-picker-outline-borderk-get-theme-color-var( neutral-160 )
Description
The border color of the outline Picker components.
$kendo-picker-outline-hover-text$kendo-color-white
Description
The text color of the hovered outline Picker components.
$kendo-picker-outline-hover-bgk-get-theme-color-var( neutral-190 )
Description
The background color of the hovered outline Picker components.
$kendo-picker-outline-hover-border$kendo-picker-outline-hover-bg!default
Description
The border color of the hovered outline Picker components.
$kendo-picker-outline-focus-textk-get-theme-color-var( neutral-160 )
Description
The text color of the focused outline Picker components.
$kendo-picker-outline-focus-bg$kendo-color-white!default
Description
The background color of the focused outline Picker components.
$kendo-picker-outline-focus-borderk-get-theme-color-var( primary-100 )
Description
The border color of the focused outline Picker components.
$kendo-picker-outline-hover-focus-text$kendo-color-white
Description
The text color of the hovered and focused outline Picker components.
$kendo-picker-outline-hover-focus-bgk-get-theme-color-var( neutral-190 )
Description
The background color of the hovered and focused outline Picker components.
$kendo-picker-outline-hover-focus-borderk-get-theme-color-var( primary-100 )
Description
The border color of the hovered and focused outline Picker components.
$kendo-picker-outline-disabled-text$kendo-disabled-text
Description
The text color of the disabled outline Picker components.
$kendo-picker-outline-disabled-bgnone
Description
The background color of the disabled outline Picker components.
$kendo-picker-outline-disabled-border$kendo-picker-outline-disabled-text!default
Description
The border color of the disabled outline Picker components.
$kendo-picker-flat-textk-get-theme-color-var( neutral-160 )
Description
The text color of the flat Picker components.
$kendo-picker-flat-bgnone
Description
The background color of the flat Picker components.
$kendo-picker-flat-borderk-get-theme-color-var( neutral-130 )
Description
The border color of the flat Picker components.
$kendo-picker-flat-hover-textk-get-theme-color-var( neutral-190 )
Description
The text color of the hovered flat Picker components.
$kendo-picker-flat-hover-bgk-get-theme-color-var( neutral-20 )
Description
The background color of the hovered flat Picker components.
$kendo-picker-flat-hover-borderk-get-theme-color-var( neutral-160 )
Description
The border color of the hovered flat Picker components.
$kendo-picker-flat-focus-textk-get-theme-color-var( neutral-160 )
Description
The text color of the focused flat Picker components.
$kendo-picker-flat-focus-bg$kendo-color-white
Description
The background color of the focused flat Picker components.
$kendo-picker-flat-focus-borderk-get-theme-color-var( primary-100 )
Description
The border color of the focused flat Picker components.
$kendo-picker-flat-hover-focus-text$kendo-picker-flat-hover-text
Description
The text color of the hovered and focused flat Picker components.
$kendo-picker-flat-hover-focus-bg$kendo-picker-flat-hover-bg
Description
The background color of the hovered and focused flat Picker components.
$kendo-picker-flat-hover-focus-border$kendo-picker-flat-border
Description
The border color of the hovered and focused flat Picker components.
$kendo-picker-flat-disabled-text$kendo-disabled-text
Description
The text color of the disabled flat Picker components.
$kendo-picker-flat-disabled-bgnone
Description
The background color of the disabled flat Picker components.
$kendo-picker-flat-disabled-border$kendo-picker-flat-disabled-text
Description
The border color of the disabled flat Picker components.
$kendo-input-sizes( sm: ( padding-x: $kendo-input-sm-padding-x, padding-y: $kendo-input-sm-padding-y, font-size: $kendo-input-sm-font-size, line-height: $kendo-input-sm-line-height, icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-md-padding-y * 2} ), button-padding-x: $kendo-input-sm-padding-y, button-padding-y: $kendo-input-sm-padding-y, button-width: $kendo-input-sm-button-width ), md: ( padding-x: $kendo-input-md-padding-x, padding-y: $kendo-input-md-padding-y, font-size: $kendo-input-md-font-size, line-height: $kendo-input-md-line-height, icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-sm-padding-y * 2} ), button-padding-x: $kendo-input-md-padding-y, button-padding-y: $kendo-input-md-padding-y, button-width: $kendo-input-md-button-width ), lg: ( padding-x: $kendo-input-lg-padding-x, padding-y: $kendo-input-lg-padding-y, font-size: $kendo-input-lg-font-size, line-height: $kendo-input-lg-line-height, icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-lg-padding-y * 2} ), button-padding-x: $kendo-input-lg-padding-y, button-padding-y: $kendo-input-lg-padding-y, button-width: $kendo-input-lg-button-width ) )
Description
The sizes map for the Input components.
$kendo-input-theme-colors( input: ( solid: ( text: $kendo-input-solid-text, bg: $kendo-input-solid-bg, border: $kendo-input-solid-border, 
        hover-text: $kendo-input-solid-hover-text,
        hover-bg: $kendo-input-solid-hover-bg,
        hover-border: $kendo-input-solid-hover-border,

        focus-text: $kendo-input-solid-focus-text,
        focus-bg: $kendo-input-solid-focus-bg,
        focus-border: $kendo-input-solid-focus-border,

        hover-focus-text: $kendo-input-solid-hover-focus-text,
        hover-focus-bg: $kendo-input-solid-hover-focus-bg,
        hover-focus-border: $kendo-input-solid-hover-focus-border,

        disabled-text: $kendo-input-solid-disabled-text,
        disabled-bg: $kendo-input-solid-disabled-bg,
        disabled-border: $kendo-input-solid-disabled-border

    ),
    outline: (
        text: $kendo-input-outline-text,
        bg: $kendo-input-outline-bg,
        border: $kendo-input-outline-border,

        hover-text: $kendo-input-outline-hover-text,
        hover-bg: $kendo-input-outline-hover-bg,
        hover-border: $kendo-input-outline-hover-border,

        focus-text: $kendo-input-outline-focus-text,
        focus-bg: $kendo-input-outline-focus-bg,
        focus-border: $kendo-input-outline-focus-border,

        hover-focus-text: $kendo-input-outline-hover-focus-text,
        hover-focus-bg: $kendo-input-outline-hover-focus-bg,
        hover-focus-border: $kendo-input-outline-hover-focus-border,

        disabled-text: $kendo-input-outline-disabled-text,
        disabled-bg: $kendo-input-outline-disabled-bg,
        disabled-border: $kendo-input-outline-disabled-border
    ),
    flat: (
        text: $kendo-input-flat-text,
        bg: $kendo-input-flat-bg,
        border: $kendo-input-flat-border,

        hover-text: $kendo-input-flat-hover-text,
        hover-bg: $kendo-input-flat-hover-bg,
        hover-border: $kendo-input-flat-hover-border,

        focus-text: $kendo-input-flat-focus-text,
        focus-bg: $kendo-input-flat-focus-bg,
        focus-border: $kendo-input-flat-focus-border,

        hover-focus-tex: $kendo-input-flat-hover-focus-text,
        hover-focus-bg: $kendo-input-flat-hover-focus-bg,
        hover-focus-border: $kendo-input-flat-hover-focus-border,

        disabled-text: $kendo-input-flat-disabled-text,
        disabled-bg: $kendo-input-flat-disabled-bg,
        disabled-border: $kendo-input-flat-disabled-border
    )
),
picker: (
    solid: (
        text: $kendo-picker-solid-text,
        bg: $kendo-picker-solid-bg,
        border: $kendo-picker-solid-border,

        hover-text: $kendo-picker-solid-hover-text,
        hover-bg: $kendo-picker-solid-hover-bg,
        hover-border: $kendo-picker-solid-hover-border,

        focus-text: $kendo-picker-solid-focus-text,
        focus-bg: $kendo-picker-solid-focus-bg,
        focus-border: $kendo-picker-solid-focus-border,

        hover-focus-tex: $kendo-picker-solid-hover-focus-text,
        hover-focus-bg: $kendo-picker-solid-hover-focus-bg,
        hover-focus-border: $kendo-picker-solid-hover-focus-border,

        disabled-text: $kendo-picker-solid-disabled-text,
        disabled-bg: $kendo-picker-solid-disabled-bg,
        disabled-border: $kendo-picker-solid-disabled-border
    ),
    outline: (
        text: $kendo-picker-outline-text,
        bg: $kendo-picker-outline-bg,
        border: $kendo-picker-outline-border,

        hover-text: $kendo-picker-outline-hover-text,
        hover-bg: $kendo-picker-outline-hover-bg,
        hover-border: $kendo-picker-outline-hover-border,

        focus-text: $kendo-picker-outline-focus-text,
        focus-bg: $kendo-picker-outline-focus-bg,
        focus-border: $kendo-picker-outline-focus-border,

        hover-focus-text: $kendo-picker-outline-hover-focus-text,
        hover-focus-bg: $kendo-picker-outline-hover-focus-bg,
        hover-focus-border: $kendo-picker-outline-hover-focus-border,

        disabled-text: $kendo-picker-outline-disabled-text,
        disabled-bg: $kendo-picker-outline-disabled-bg,
        disabled-border: $kendo-picker-outline-disabled-border
    ),
    flat: (
        text: $kendo-picker-flat-text,
        bg: $kendo-picker-flat-bg,
        border: $kendo-picker-flat-border,

        hover-text: $kendo-picker-flat-hover-text,
        hover-bg: $kendo-picker-flat-hover-bg,
        hover-border: $kendo-picker-flat-hover-border,

        focus-text: $kendo-picker-flat-focus-text,
        focus-bg: $kendo-picker-flat-focus-bg,
        focus-border: $kendo-picker-flat-focus-border,

        hover-focus-tex: $kendo-picker-flat-hover-focus-text,
        hover-focus-bg: $kendo-picker-flat-hover-focus-bg,
        hover-focus-border: $kendo-picker-flat-hover-focus-border,

        disabled-text: $kendo-picker-flat-disabled-text,
        disabled-bg: $kendo-picker-flat-disabled-bg,
        disabled-border: $kendo-picker-flat-disabled-border
    )
)

)

Description
Colors map of the input.
$kendo-input-prefix-bgk-get-theme-color-var( neutral-20 )
Description
The background color of the Input prefix.
$kendo-input-suffix-bgk-get-theme-color-var( neutral-20 )
Description
The background color of the Input suffix.
$kendo-input-invalid-bordervar( --kendo-invalid-border, #{$kendo-invalid-border} )
Description
The border color of the invalid Input components.
$kendo-input-invalid-textvar( --kendo-invalid-text, #{$kendo-invalid-text} )
Description
The text color of the invalid Input components.
$kendo-input-placeholder-textk-get-theme-color-var( neutral-130 )
Description
The text color of the Input placeholder.
$kendo-input-placeholder-opacity1
Description
The opacity of the Input placeholder.
$kendo-input-clear-value-textk-get-theme-color-var( neutral-130 )
Description
The color of the Input clear value icon.
$kendo-input-clear-value-opacity.6
Description
The opacity of the Input clear value icon.
$kendo-input-clear-value-hover-textinherit
Description
The color of the hovered Input clear value icon.
$kendo-input-clear-value-hover-opacity1
Description
The opacity of the hovered Input clear value icon.

Suggested Links

Previous
Customizing Imageeditor
Next
Customizing List

In this article

Not finding the help you need?

Contact Support