New to Kendo UI for Angular? Start a free 30-day trial
Customizing Checkbox
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-checkbox-border-radius | null | ||
Description
The border radius of the CheckBox. | |||
| $kendo-checkbox-border-width | 1px | ||
Description
The border width of the CheckBox. | |||
| $kendo-checkbox-bg | $kendo-component-bg | ||
Description
The background color of the CheckBox. | |||
| $kendo-checkbox-text | transparent | ||
Description
The text color of the CheckBox. | |||
| $kendo-checkbox-border | k-get-theme-color-var( neutral-160 ) | ||
Description
The border color of the CheckBox. | |||
| $kendo-checkbox-hover-bg | $kendo-checkbox-bg | ||
Description
The background color of the hovered CheckBox. | |||
| $kendo-checkbox-hover-text | k-get-theme-color( neutral, 130 ) | ||
Description
The text color of the hovered CheckBox. | |||
| $kendo-checkbox-hover-border | $kendo-checkbox-border | ||
Description
The border color of the hovered CheckBox. | |||
| $kendo-checkbox-checked-bg | k-get-theme-color-var( primary-100 ) | ||
Description
The background color of the checked CheckBox. | |||
| $kendo-checkbox-checked-text | $kendo-color-white | ||
Description
The text color of the checked CheckBox. | |||
| $kendo-checkbox-checked-border | $kendo-checkbox-checked-bg | ||
Description
The border color of the checked CheckBox. | |||
| $kendo-checkbox-hover-checked-bg | k-get-theme-color-var( primary-110 ) | ||
Description
The background of the hovered and checked CheckBox. | |||
| $kendo-checkbox-hover-checked-text | $kendo-color-white | ||
Description
The text color of the hovered and checked CheckBox. | |||
| $kendo-checkbox-hover-checked-border | $kendo-checkbox-hover-checked-bg | ||
Description
The border color of the hovered and checked CheckBox. | |||
| $kendo-checkbox-focus-border | null | ||
Description
The border color of the focused CheckBox. | |||
| $kendo-checkbox-focus-shadow | null | ||
Description
The box shadow of the focused CheckBox. | |||
| $kendo-checkbox-focus-outline | 1px solid k-get-theme-color-var( neutral-130 ) | ||
Description
The outline of the focused CheckBox. | |||
| $kendo-checkbox-indeterminate-bg | $kendo-checkbox-bg | ||
Description
The background color of the indeterminate CheckBox. | |||
| $kendo-checkbox-indeterminate-text | k-get-theme-color( primary, 100 ) | ||
Description
The text color of the indeterminate CheckBox. | |||
| $kendo-checkbox-indeterminate-border | k-get-theme-color-var( primary-100 ) | ||
Description
The border color of the indeterminate CheckBox. | |||
| $kendo-checkbox-hover-indeterminate-bg | $kendo-checkbox-bg | ||
Description
The background color of the hovered and indeterminate CheckBox. | |||
| $kendo-checkbox-hover-indeterminate-text | k-get-theme-color( primary, 110 ) | ||
Description
The text color of the hovered and indeterminate CheckBox. | |||
| $kendo-checkbox-hover-indeterminate-border | k-get-theme-color-var( primary-110 ) | ||
Description
The border color of the hovered and indeterminate CheckBox. | |||
| $kendo-checkbox-disabled-bg | $kendo-checkbox-bg | ||
Description
The background color of the disabled CheckBox. | |||
| $kendo-checkbox-disabled-text | k-get-theme-color-var( neutral-60 ) | ||
Description
The text color of the disabled CheckBox. | |||
| $kendo-checkbox-disabled-border | k-get-theme-color-var( neutral-60 ) | ||
Description
The border color of the disabled CheckBox. | |||
| $kendo-checkbox-disabled-checked-bg | k-get-theme-color-var( neutral-60 ) | ||
Description
The background color of the disabled and checked CheckBox. | |||
| $kendo-checkbox-disabled-checked-text | $kendo-color-white | ||
Description
The text color of the disabled and checked CheckBox. | |||
| $kendo-checkbox-disabled-checked-border | k-get-theme-color-var( neutral-60 ) | ||
Description
The border color of the disabled and checked CheckBox. | |||
| $kendo-checkbox-disabled-indeterminate-bg | $kendo-checkbox-bg | ||
Description
The background color of the disabled and indeterminate CheckBox. | |||
| $kendo-checkbox-disabled-indeterminate-text | k-get-theme-color( neutral, 60 ) | ||
Description
The border color of the disabled and indeterminate CheckBox. | |||
| $kendo-checkbox-disabled-indeterminate-border | k-get-theme-color-var( neutral-60 ) | ||
Description
The border color of the disabled and indeterminate CheckBox. | |||
| $kendo-checkbox-invalid-bg | $kendo-checkbox-bg | ||
Description
The background color of an invalid CheckBox. | |||
| $kendo-checkbox-invalid-text | $kendo-invalid-text | ||
Description
The text color of an invalid CheckBox. | |||
| $kendo-checkbox-invalid-border | $kendo-invalid-border | ||
Description
The border color of an invalid CheckBox. | |||
| $kendo-checkbox-indicator-type | image | ||
Description
The type of the CheckBox indicator. | |||
| $kendo-checkbox-glyph-font-family | "WebComponentsIcons", monospace | ||
Description
The font family of the CheckBox indicator glyph. | |||
| $kendo-checkbox-checked-glyph | "\e118" | ||
Description
The glyph of the CheckBox indicator. | |||
| $kendo-checkbox-indeterminate-glyph | "\e121" | ||
Description
The glyph of the indeterminate CheckBox indicator. | |||
| $kendo-checkbox-hover-image | escape-svg( url("data:image/svg+xml,") ) | ||
Description
The image of the hovered CheckBox indicator. | |||
| $kendo-checkbox-checked-image | escape-svg( url("data:image/svg+xml,") ) | ||
Description
The image of the checked CheckBox indicator. | |||
| $kendo-checkbox-indeterminate-image | escape-svg( url("data:image/svg+xml,") ) | ||
Description
The image of the indeterminate CheckBox indicator. | |||
| $kendo-checkbox-hover-checked-image | escape-svg( url("data:image/svg+xml,") ) | ||
Description
The image of the hovered and checked CheckBox indicator. | |||
| $kendo-checkbox-hover-indeterminate-image | escape-svg( url("data:image/svg+xml,") ) | ||
Description
The image of the hovered and indeterminate CheckBox indicator. | |||
| $kendo-checkbox-disabled-checked-image | escape-svg( url("data:image/svg+xml,") ) | ||
Description
The image of the checked CheckBox indicator. | |||
| $kendo-checkbox-disabled-indeterminate-image | escape-svg( url("data:image/svg+xml,") ) | ||
Description
The image of the indeterminate CheckBox indicator. | |||
| $kendo-checkbox-label-margin-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal margin of the CheckBox inside a label. | |||
| $kendo-checkbox-list-spacing | map.get( $kendo-spacing, 4 ) | ||
Description
The spacing between the items in a horizontal CheckBox list. | |||
| $kendo-checkbox-list-item-padding-x | 0px | ||
Description
The horizontal padding of the CheckBox list items. | |||
| $kendo-checkbox-list-item-padding-y | $kendo-list-md-item-padding-y | ||
Description
The vertical padding of the CheckBox list items. | |||
| $kendo-checkbox-ripple-bg | k-get-theme-color-var( primary-100 ) | ||
Description
The background color of the CheckBox' ripple. | |||
| $kendo-checkbox-ripple-opacity | .25 | ||
Description
The opacity of the CheckBox' ripple. | |||
