Style and Appearance in Blazor Color Picker
27 Aug 20262 minutes to read
Customize the Blazor Color Picker appearance by overriding its default CSS. The following table lists the key CSS classes and the corresponding UI sections in the Blazor Color Picker. For broader, theme-level changes, create a custom theme using Theme Studio.
CSS classes
| CSS Class | Purpose of Class |
|---|---|
.e-colorpicker-popup .e-container .e-handler |
Customizes the Blazor Color Picker selection handler. |
.e-colorpicker-popup .e-container.e-color-picker |
Customizes the Blazor Color Picker container. |
.e-colorpicker-popup .e-container .e-palette .e-tile |
Customizes the Blazor Color Picker palette item. |
.e-colorpicker-popup .e-container .e-switch-ctrl-btn |
Customizes the Blazor Color Picker switch control. |
.e-colorpicker-popup .e-container .e-slider-preview |
Customizes the Blazor Color Picker slider control. |
Applying custom CSS
The following example shows how to change the selection handler size, the tile border radius, and the switch control background using the CSS classes listed above.
/* filepath: wwwroot/css/color-picker.css */
/* Increase the size of the selection handler */
.e-colorpicker-popup .e-container .e-handler {
height: 18px;
width: 18px;
border: 2px solid #ffffff;
box-shadow: 0 0 0 1px #003366;
}
/* Round the palette tiles */
.e-colorpicker-popup .e-container .e-palette .e-tile {
border-radius: 50%;
margin: 2px;
}
/* Tint the switch control bar */
.e-colorpicker-popup .e-container .e-switch-ctrl-btn {
background-color: #f5f5f5;
}