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 background color of wrapper element.
.e-multiselect.e-input-group .e-multi-select-wrapper {
background-color: red;
}Use the following CSS to customize the appearance of delimiter wrapper element.
.e-multiselect .e-delim-values {
-webkit-text-fill-color: blue;
font-size: 16px;
font-family: cursive;
}Use the following CSS to customize the appearance of selected chips.
.e-multiselect .e-multi-select-wrapper .e-chips .e-chipcontent {
font-family: cursive;
font-size: 20px;
-webkit-text-fill-color: blue;
}
.e-multi-select-wrapper .e-chips {
background-color: aqua;
height: 26px;
}Use the following CSS to customize the dropdown icon’s color.
.e-multiselect.e-input-group .e-input-group-icon, .e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon:hover {
color: red;
font-size: 14px;
}Use the following CSS to customize the focusing color of input element.
.e-multiselect.e-input-group.e-control-wrapper.e-input-focus::before, .e-multiselect.e-input-group.e-control-wrapper.e-input-focus::after {
background: #c000ff;
}Use the following CSS to customize the text color when the component is disabled.
.e-multiselect.e-disabled .e-multi-select-wrapper .e-delim-values {
-webkit-text-fill-color: red;
}Use the following CSS to customize the text color of placeholder.
.e-multiselect input.e-dropdownbase::placeholder {
color: red;
}Use the following CSS to add the mandatory indicator * to the float label element.
.e-input-group.e-control-wrapper.e-float-input .e-float-text::after {
content: "*";
color: red;
}Use the following CSS to customize the focusing color of float label element.
.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before,.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before,.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after,.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after {
background-color: #2319b8;
}
.e-multiselect.e-input-group.e-control-wrapper.e-float-input.e-input-focus .e-float-text.e-label-top, .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text {
color: #2319b8;
}Use the following CSS to customize the focusing color of outline theme.
.e-outline.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),.e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),.e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),.e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
border-color: #b1bd15;
box-shadow: inset 1px 1px #b1bd15, inset -1px 0 #b1bd15, inset 0 -1px #b1bd15;
}Use the following CSS to customize the background color of focus, hover and active item’s.
.e-dropdownbase .e-list-item.e-item-focus, .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover, .e-dropdownbase .e-list-item.e-hover {
background-color: #1f9c99;
color: #2319b8;
}Use the following CSS to customize the appearance of popup element.
.e-dropdownbase .e-list-item, .e-dropdownbase .e-list-item.e-item-focus {
background-color: #29c2b8;
color: #207cd9;
font-family: emoji;
min-height: 29px
}Use the following CSS to customize the color of checkbox.
.e-popup .e-checkbox-wrapper .e-frame.e-check, .e-popup .e-checkbox-wrapper:hover .e-frame.e-check {
background-color: green;
color: white;
}