Style and Appearance in Blazor In-place Editor Component

27 Dec 20242 minutes to read

The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.

To get started quickly with customizing the Blazor In-place Editor, watch the following video or explore the GitHub sample:

Customizing the In-place Editor text

Use the following CSS to customize the default In-place Editor’s text content properties like font-family, font-size, color and border bottom.

/* To change color, font family and font size */
.e-inplaceeditor .e-editable-value-wrapper .e-editable-value {
    border-bottom: 2px dotted green;
    color: red;
    font-size: 12px;
    font-family: Segoe UI
}

Customizing the In-place Editor action buttons

Use the following CSS to customize the default In-place Editor’s action buttons.

/* To change icon color for save button */
.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn .e-btn-icon.e-icons,
.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn .e-btn-icon.e-icons{
    color: green;
}

/* To change icon color for cancel button */
.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn .e-btn-icon.e-icons,  .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn .e-btn-icon.e-icons {
    color: red;
}

/* To change background color for save button */
.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn,
.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn {
    background-color: antiquewhite;
}

/* To change background color for cancel button */
.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn,
.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn {
    background-color: antiquewhite;
}

Customizing In-place editor outer style like material filled

Use the following CSS to customize the In-place editor outer style like material filled text fields.

/* To remove the default bottom underline */
.e-inplaceeditor .e-editable-value-container .e-editable-value {
    border-bottom: none;
}
/* To change background color and border radius of in-place editor container */
.e-inplaceeditor .e-editable-value-container {
    background: #e9ecef;
    border-radius: 4px;
}
/* To show the edit icon */
.e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon {
    visibility: visible;
}