Style and appearance in React Checkbox
03 Sep 20261 minute to read
Customize the React Checkbox appearance by overriding its default CSS styles. The following table lists the CSS classes available for React Checkbox styling:
| CSS Class | Purpose |
|---|---|
.e-checkbox-wrapper .e-frame |
Styles the React Checkbox frame |
.e-checkbox-wrapper:hover .e-frame |
Styles the React Checkbox frame on hover state |
.e-checkbox-wrapper .e-label |
Styles the React Checkbox label |
.e-checkbox-wrapper:hover .e-label |
Styles the React Checkbox label on hover state |
.e-checkbox-wrapper .e-frame.e-check |
Styles the checked React Checkbox frame |
.e-checkbox-wrapper:hover .e-frame.e-check |
Styles the checked React Checkbox frame on hover state |
.e-checkbox-wrapper .e-frame.e-indeterminate |
Styles the indeterminate React Checkbox frame |
.e-checkbox-wrapper.e-disabled .e-frame |
Styles the disabled React Checkbox frame |
.e-checkbox-wrapper .e-ripple |
Styles the ripple effect on React Checkbox |
Create custom themes for the React Checkbox component using the Theme Studio. Define custom CSS according to your requirements and apply it to the React Checkbox elements.