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

Customizing Checkbox

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-checkbox-border-widthNumber1px1px
Description
The border width of the CheckBox.
$kendo-checkbox-sm-sizeNumberk-map-get( $kendo-spacing, 3 )12px
Description
The size of a small CheckBox.
$kendo-checkbox-md-sizeNumberk-map-get( $kendo-spacing, 4 )16px
Description
The size of a medium CheckBox.
$kendo-checkbox-lg-sizeNumberk-map-get( $kendo-spacing, 5 )20px
Description
The size of a large CheckBox.
$kendo-checkbox-sm-glyph-sizeNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The glyph size of a small CheckBox.
$kendo-checkbox-md-glyph-sizeNumberk-map-get( $kendo-spacing, 3.5 )14px
Description
The glyph size of a medium CheckBox.
$kendo-checkbox-lg-glyph-sizeNumberk-map-get( $kendo-spacing, 4.5 )18px
Description
The glyph size of a large CheckBox.
$kendo-checkbox-sm-ripple-sizeNumber300%300%
Description
The ripple size of a small CheckBox.
$kendo-checkbox-md-ripple-sizeNumber300%300%
Description
The ripple size of a medium CheckBox.
$kendo-checkbox-lg-ripple-sizeNumber300%300%
Description
The ripple size of a large CheckBox.
$kendo-checkbox-bgColor$kendo-component-bg#ffffff
Description
The background color of the CheckBox.
$kendo-checkbox-textNullnullnull
Description
The text color of the CheckBox.
$kendo-checkbox-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
The border color of the CheckBox.
$kendo-checkbox-hover-bgNullnullnull
Description
The background color of the hovered CheckBox.
$kendo-checkbox-hover-textNullnullnull
Description
The text color of the hovered CheckBox.
$kendo-checkbox-hover-borderNullnullnull
Description
The border color of the hovered CheckBox.
$kendo-checkbox-checked-bgColor$kendo-color-primary#ff6358
Description
The background color of the checked CheckBox.
$kendo-checkbox-checked-textColorif($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg ))white
Description
The text color of the checked CheckBox.
$kendo-checkbox-checked-borderColor$kendo-checkbox-checked-bg#ff6358
Description
The border color of the checked CheckBox.
$kendo-checkbox-indeterminate-bgColor$kendo-checkbox-bg#ffffff
Description
The background color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-textColor$kendo-checkbox-checked-bg#ff6358
Description
The text color of the indeterminate CheckBox.
$kendo-checkbox-indeterminate-borderColor$kendo-checkbox-borderrgba(0, 0, 0, 0.08)
Description
The border color of the indeterminate CheckBox.
$kendo-checkbox-focus-borderNullnullnull
Description
The border color of the focused CheckBox.
$kendo-checkbox-focus-shadowList0 0 0 2px rgba(0, 0, 0, .06)0 0 0 2px rgba(0, 0, 0, 0.06)
Description
The box shadow of the focused CheckBox.
$kendo-checkbox-focus-checked-borderNullnullnull
Description
The border color of the focused and checked CheckBox.
$kendo-checkbox-focus-checked-shadowList0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 ))0 0 0 2px rgba(255, 99, 88, 0.3)
Description
The box shadow of the focused and checked CheckBox.
$kendo-checkbox-disabled-bgNullnullnull
Description
The background color of the disabled CheckBox.
$kendo-checkbox-disabled-textNullnullnull
Description
The text color of the disabled CheckBox.
$kendo-checkbox-disabled-borderNullnullnull
Description
The border color of the disabled CheckBox.
$kendo-checkbox-disabled-checked-bgNullnullnull
Description
The background color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-textNullnullnull
Description
The text color of the disabled and checked CheckBox.
$kendo-checkbox-disabled-checked-borderNullnullnull
Description
The border color of the disabled and checked CheckBox.
$kendo-checkbox-invalid-bgNullnullnull
Description
The background color of an invalid CheckBox.
$kendo-checkbox-invalid-textColor$kendo-invalid-text#f31700
Description
The text color of an invalid CheckBox.
$kendo-checkbox-invalid-borderColor$kendo-invalid-border#f31700
Description
The border color of an invalid CheckBox.
$kendo-checkbox-indicator-typeStringimageimage
Description
The type of the CheckBox indicator.
$kendo-checkbox-glyph-font-familyList"WebComponentsIcons", monospace"WebComponentsIcons", monospace
Description
The font family of the CheckBox indicator glyph.
$kendo-checkbox-checked-glyphString"\e118""\e118"
Description
The glyph of the CheckBox indicator.
$kendo-checkbox-indeterminate-glyphString"\e121""\e121"
Description
The glyph of the indeterminate CheckBox indicator.
$kendo-checkbox-checked-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e")
Description
The image for a checked CheckBox indicator.
$kendo-checkbox-indeterminate-imageStringk-escape-svg( url("data:image/svg+xml,") )url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff6358' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/%3e%3c/svg%3e")
Description
The image for a indeterminate CheckBox indicator.
$kendo-checkbox-label-margin-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal margin of the CheckBox inside a label.
$kendo-checkbox-list-spacingNumberk-map-get( $kendo-spacing, 4 )16px
Description
The spacing between the items in a horizontal CheckBox list.
$kendo-checkbox-list-item-padding-xNumber0px0px
Description
The horizontal padding of the CheckBox list items.
$kendo-checkbox-list-item-padding-yNumber$kendo-list-md-item-padding-y4px
Description
The vertical padding of the CheckBox list items.
$kendo-checkbox-ripple-bgColor$kendo-checkbox-checked-bg#ff6358
Description
The background color of the CheckBox' ripple.
$kendo-checkbox-ripple-opacityNumber.250.25
Description
The opacity of the CheckBox' ripple.

In this article

Not finding the help you need?