Style and appearance in React Checkbox
4 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.