The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.
Use the following CSS to customize the chip text properties.
.e-chip .e-chip-text {
font-size: 20px;
color: black;
font-weight: normal;
}Use the following CSS to customize the chip icon properties.
.e-chip .e-icon {
background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/laura.png');
opacity: 0.8;
}Use the following CSS to customize the chip delete button.
.e-chip-list .e-chip .e-chip-delete.e-dlt-btn {
color: #e3165b;
font-size: 12px;
}Use the following CSS to customize the chip outline.
.e-chip-list .e-chip.e-outline {
border-color: #e3165b;
border-width: 3px;
}Use the following CSS to customize the chip on selection.
/* To customize single chip on selection */
.e-chip-list.e-selection .e-chip.e-active {
background-color: #ffca1c;
color: #e3165b;
}
/* To customize multiple chip on selection */
.e-chip-list .e-chip.e-active {
background-color: #e3165b;
color: white;
}Use the following CSS to customize the chip avatar text properties.
.e-chip-list .e-chip .e-chip-avatar {
background-color: #d51a1a;
color: #fafafa;
}