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 | null | null |
Description
Border radius of checkbox | |||
| $kendo-checkbox-border-width | Number | 1px | 1px |
Description
Border width of checkbox. | |||
| $kendo-checkbox-bg | Color | $kendo-component-bg | #ffffff |
Description
Background color of checkbox. | |||
| $kendo-checkbox-text | Null | null | null |
Description
Color of checkbox. | |||
| $kendo-checkbox-border | Color | $kendo-component-border | #ededed |
Description
Border color of checkbox. | |||
| $kendo-checkbox-hover-bg | Null | null | null |
Description
Background color of hovered checkbox. | |||
| $kendo-checkbox-hover-text | Null | null | null |
Description
Color of hovered checkbox. | |||
| $kendo-checkbox-hover-border | Null | null | null |
Description
Border color of hovered checkbox. | |||
| $kendo-checkbox-focus-border | Null | null | null |
Description
Border color of focused checkbox. | |||
| $kendo-checkbox-focus-shadow | Null | null | null |
Description
Box shadow of focused checkbox. | |||
| $kendo-checkbox-focus-outline | Null | null | null |
Description
The outline of a focused checkbox. | |||
| $kendo-checkbox-checked-bg | Color | $kendo-color-primary | #622331 |
Description
Background color of checked checkbox. | |||
| $kendo-checkbox-checked-text | Color | k-contrast-color( $kendo-checkbox-checked-bg ) | white |
Description
Color of checked checkbox. | |||
| $kendo-checkbox-checked-border | Color | $kendo-checkbox-checked-bg | #622331 |
Description
Border color of checked checkbox. | |||
| $kendo-checkbox-hover-checked-bg | Null | null | null |
Description
Background of hovered and checked checkbox. | |||
| $kendo-checkbox-hover-checked-text | Null | null | null |
Description
Color of checked checkbox. | |||
| $kendo-checkbox-hover-checked-border | Null | null | null |
Description
Border of hovered and checked checkbox. | |||
| $kendo-checkbox-indeterminate-bg | Color | $kendo-checkbox-checked-bg | #622331 |
Description
Background color of indeterminate checkbox. | |||
| $kendo-checkbox-indeterminate-text | Color | $kendo-checkbox-checked-text | white |
Description
Color of indeterminate checkbox. | |||
| $kendo-checkbox-indeterminate-border | Color | $kendo-checkbox-checked-border | #622331 |
Description
Border color of indeterminate checkbox. | |||
| $kendo-checkbox-hover-indeterminate-bg | Null | null | null |
Description
Background color of hovered and indeterminate checkbox. | |||
| $kendo-checkbox-hover-indeterminate-text | Null | null | null |
Description
Background color of hovered and indeterminate checkbox. | |||
| $kendo-checkbox-hover-indeterminate-border | Null | null | null |
Description
Border color of hovered and indeterminate checkbox. | |||
| $kendo-checkbox-disabled-bg | Null | null | null |
Description
Background color of disabled checkbox. | |||
| $kendo-checkbox-disabled-text | Null | null | null |
Description
Color of disabled checkbox. | |||
| $kendo-checkbox-disabled-border | Null | null | null |
Description
Border color of disabled checkbox. | |||
| $kendo-checkbox-disabled-checked-bg | Null | null | null |
Description
Background color of disabled and checked checkbox. | |||
| $kendo-checkbox-disabled-checked-text | Null | null | null |
Description
Color of disabled and checked checkbox. | |||
| $kendo-checkbox-disabled-checked-border | Null | null | null |
Description
Border color of disabled and checked checkbox. | |||
| $kendo-checkbox-disabled-indeterminate-bg | Null | null | null |
Description
Background color of disabled and indeterminate checkbox. | |||
| $kendo-checkbox-disabled-indeterminate-text | Null | null | null |
Description
Border color of disabled and indeterminate checkbox. | |||
| $kendo-checkbox-disabled-indeterminate-border | Null | null | null |
Description
Border color of disabled and indeterminate checkbox. | |||
| $kendo-checkbox-invalid-bg | Color | $kendo-checkbox-bg | #ffffff |
Description
Background color of invalid checkbox. | |||
| $kendo-checkbox-invalid-text | Color | $kendo-invalid-text | #cf222e |
Description
Color of invalid checkbox. | |||
| $kendo-checkbox-invalid-border | Color | $kendo-invalid-border | #cf222e |
Description
Border color of invalid checkbox. | |||
| $kendo-checkbox-indicator-type | String | glyph | glyph |
Description
Type of checkbox indicator. | |||
| $kendo-checkbox-glyph-font-family | List | "WebComponentsIcons", monospace | "WebComponentsIcons", monospace |
Description
Glyph font family of checkbox indicator. | |||
| $kendo-checkbox-checked-glyph | String | "\e118" | "\e118" |
Description
Glyph of checkbox indicator. | |||
| $kendo-checkbox-indeterminate-glyph | String | "\e121" | "\e121" |
Description
Glyph of indeterminate checkbox indicator. | |||
| $kendo-checkbox-image | Null | null | null |
Description
Image of checkbox indicator. | |||
| $kendo-checkbox-hover-image | Null | null | null |
Description
Image of hovered checkbox indicator. | |||
| $kendo-checkbox-checked-image | Null | null | null |
Description
Image of checked checkbox indicator. | |||
| $kendo-checkbox-indeterminate-image | Null | null | null |
Description
Image of indeterminate checkbox indicator. | |||
| $kendo-checkbox-hover-checked-image | Null | null | null |
Description
Image of hovered and checked checkbox indicator. | |||
| $kendo-checkbox-hover-indeterminate-image | Null | null | null |
Description
Image of hovered and indeterminate checkbox indicator. | |||
| $kendo-checkbox-disabled-checked-image | Null | null | null |
Description
Image of checked checkbox indicator. | |||
| $kendo-checkbox-disabled-indeterminate-image | Null | null | null |
Description
Image of indeterminate checkbox indicator. | |||
| $kendo-checkbox-list-spacing | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Spacing between items of horizontal checkbox list. | |||
| $kendo-checkbox-list-item-padding-x | Null | null | null |
Description
Horizontal padding of checkbox list items. | |||
| $kendo-checkbox-list-item-padding-y | Null | null | null |
Description
Vertical padding of checkbox list items. | |||
| $kendo-checkbox-list-item-spacing | Null | null | null |
Description
Spacing between checkbox and text. | |||
| $kendo-checkbox-ripple-bg | Color | $kendo-color-primary | #622331 |
Description
Background color of checkbox ripple. | |||
| $kendo-checkbox-ripple-opacity | Number | .25 | 0.25 |
Description
Opacity of checkbox ripple. | |||
