Style and Appearance in Angular Color Picker
25 Sep 20261 minute to read
The following CSS structure can be used to customize the Angular Color Picker appearance based on user preference. Alternatively, create a custom theme using the Theme Studio.
| CSS Class | Purpose |
|---|---|
| .e-custom-picker .e-container .e-handler | Customizes the color selection handler appearance |
| .color-picker.e-dropdown-popup ul .e-container | Customizes the main ColorPicker container |
| .color-picker.e-dropdown-popup ul .e-item.e-palette-item | Customizes individual palette color tiles |
| .color-picker.e-dropdown-popup .e-container .e-switch | Customizes the mode switcher button |
| .color-picker.e-dropdown-popup .e-container .e-slider-preview | Customizes the slider and color preview area |
Custom Styling with cssClass Property in ColorPicker
The Angular Color Picker component allows for customization using the cssClass property, enabling you to apply custom styles such as increasing the height of the input elements.
Apply cssClass Property
Add the cssClass attribute to the Angular Color Picker component to attach a custom class:
<ejs-colorpicker cssClass="custom-class" value="#008000"></ejs-colorpicker>Target the Button Wrapper
Use the .e-split-btn-wrapper class to control the height of the visible input/button:
.custom-class.e-split-btn-wrapper {
height: 40px;
}Adjust Popup Input Fields
To ensure consistent height across all input fields (HEX, R, G, B, A) in the popup, use the following CSS:
.custom-class .e-float-input.e-control-wrapper.e-input-group.e-valid-input {
height: 40px;
}Note: The
cssClass="custom-class"property adds a custom class to the Angular Color Picker component..e-split-btn-wrappertargets the main Angular Color Picker UI height..e-float-input.e-control-wrapper.e-input-group.e-valid-inputadjusts the height of input fields (HEX & RGBA) inside the popup for uniformity.