Progress® ThemeBuilder Pro Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 04 May 2026 07:46 by ADMIN
Anastasia
Created on: 30 Apr 2026 15:43
Type: Bug Report
0
Theming NumericTextBox in material theme does not work

I am having difficulty to theme the NumericTextBox in outline mode. Theme builder shows correctly the themed component, with some difficulties... it seems that I need to set everything up multiple time in order for the tool to store the new values.
When I use the exported theme in a Blazor application, the outline numeric textbox is not able to theme the spinner buttons (up and down) and they default to base color, whitish in light themes, and loose borders when hovering over it. I am attaching the output css from theme builder.

In theme builder I see the following

Attached Files:
1 comment
ADMIN
Nick Iliev
Posted on: 04 May 2026 07:46

Hello Anastasia,

 

Thank you for reporting the issue and providing the same CSS file. Our investigation revealed that the behavior you're experiencing is actually a bug in the Blazor UI suite. I have documented this bug on your behalf on the following GitHub thread, which you can reference: 

https://github.com/telerik/kendo-ui-core/issues/8464. 

The issue stems from a missing k-button-outline CSS class in the rendering generated by UI for Blazor, which is unexpected according to the Kendo theme repository source of truth (used by both ThemeBuilder and UI for Blazor). As a temporary fix, you can manually remove the k-button-outline class from the CSS related to the outline of the NumericTextBox.

For example:

1. Create an external CSS named numerictextbox-outline.css and place the CSS rules related to the component, but with the k-button-outline class removed.

/* removed k-button-outline */
.k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button {
    color: var(--kendo-color-app-surface, #FEFBFF);
    background-color: var(--kendo-color-info, #2C6DDD);
    background-image: none
}

.k-numerictextbox.k-input.k-input-outline.k-focus,
.k-numerictextbox.k-input.k-input-outline.k-state-focus,
.k-numerictextbox.k-input.k-input-outline.k-state-focused,
.k-numerictextbox.k-input.k-input-outline:focus {
    border-bottom-color: var(--kendo-color-info-active, #1B4EA7);
    border-left-color: var(--kendo-color-info-active, #1B4EA7);
    border-right-color: var(--kendo-color-info-active, #1B4EA7);
    border-top-color: var(--kendo-color-info-active, #1B4EA7)
}

.k-numerictextbox.k-input.k-input-outline.k-hover,
.k-numerictextbox.k-input.k-input-outline.k-state-hover,
.k-numerictextbox.k-input.k-input-outline.k-state-hovered,
.k-numerictextbox.k-input.k-input-outline:hover {
    border-bottom-color: var(--kendo-color-info, #2C6DDD);
    border-left-color: var(--kendo-color-info, #2C6DDD);
    border-right-color: var(--kendo-color-info, #2C6DDD);
    border-top-color: var(--kendo-color-info, #2C6DDD)
}

    .k-numerictextbox.k-input.k-input-outline.k-hover .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button,
    .k-numerictextbox.k-input.k-input-outline.k-state-hover .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button,
    .k-numerictextbox.k-input.k-input-outline.k-state-hovered .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button,
    .k-numerictextbox.k-input.k-input-outline:hover .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button {
        background-color: var(--kendo-color-info, #2C6DDD);
        background-image: none
    }

    .k-numerictextbox.k-input.k-input-outline.k-hover .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button,
    .k-numerictextbox.k-input.k-input-outline.k-state-hover .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button,
    .k-numerictextbox.k-input.k-input-outline.k-state-hovered .k-spin-button.k-input-spinner .k-spinner-decrease.k-butto.k-icon-button,
    .k-numerictextbox.k-input.k-input-outline:hover .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button {
        background-color: var(--kendo-color-info, #2C6DDD);
        background-image: none
    }

    .k-numerictextbox.k-input.k-input-outline.k-hover .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-hover,
    .k-numerictextbox.k-input.k-input-outline.k-hover .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-state-hover,
    .k-numerictextbox.k-input.k-input-outline.k-hover .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-state-hovered,
    .k-numerictextbox.k-input.k-input-outline.k-hover .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button:hover,
    .k-numerictextbox.k-input.k-input-outline.k-state-hover .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-hover,
    .k-numerictextbox.k-input.k-input-outline.k-state-hover .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-state-hover,
    .k-numerictextbox.k-input.k-input-outline.k-state-hover .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-state-hovered,
    .k-numerictextbox.k-input.k-input-outline.k-state-hover .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button:hover,
    .k-numerictextbox.k-input.k-input-outline.k-state-hovered .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-hover,
    .k-numerictextbox.k-input.k-input-outline.k-state-hovered .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-state-hover,
    .k-numerictextbox.k-input.k-input-outline.k-state-hovered .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-state-hovered,
    .k-numerictextbox.k-input.k-input-outline.k-state-hovered .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button:hover,
    .k-numerictextbox.k-input.k-input-outline:hover .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-hover,
    .k-numerictextbox.k-input.k-input-outline:hover .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-state-hover,
    .k-numerictextbox.k-input.k-input-outline:hover .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-state-hovered,
    .k-numerictextbox.k-input.k-input-outline:hover .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button:hover {
        background-color: var(--kendo-color-info-hover, #215FCA);
        background-image: none;
        color: var(--kendo-color-app-surface, #FEFBFF)
    }

    .k-numerictextbox.k-input.k-input-outline.k-hover .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-hover,
    .k-numerictextbox.k-input.k-input-outline.k-hover .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-state-hover,
    .k-numerictextbox.k-input.k-input-outline.k-hover .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-state-hovered,
    .k-numerictextbox.k-input.k-input-outline.k-hover .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button:hover,
    .k-numerictextbox.k-input.k-input-outline.k-state-hover .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-hover,
    .k-numerictextbox.k-input.k-input-outline.k-state-hover .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-state-hover,
    .k-numerictextbox.k-input.k-input-outline.k-state-hover .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-state-hovered,
    .k-numerictextbox.k-input.k-input-outline.k-state-hover .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button:hover,
    .k-numerictextbox.k-input.k-input-outline.k-state-hovered .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-hover,
    .k-numerictextbox.k-input.k-input-outline.k-state-hovered .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-state-hover,
    .k-numerictextbox.k-input.k-input-outline.k-state-hovered .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-state-hovered,
    .k-numerictextbox.k-input.k-input-outline.k-state-hovered .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button:hover,
    .k-numerictextbox.k-input.k-input-outline:hover .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-hover,
    .k-numerictextbox.k-input.k-input-outline:hover .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-state-hover,
    .k-numerictextbox.k-input.k-input-outline:hover .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-state-hovered,
    .k-numerictextbox.k-input.k-input-outline:hover .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button:hover {
        background-color: var(--kendo-color-info-hover, #215FCA);
        background-image: none
    }

.k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button {
    background-color: var(--kendo-color-info, #2C6DDD);
    background-image: none;
    color: var(--kendo-color-app-surface, #FEFBFF)
}

    .k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-hover,
    .k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-state-hover,
    .k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-state-hovered,
    .k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button:hover {
        background-color: var(--kendo-color-info-hover, #215FCA);
        background-image: none
    }

.k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-hover,
.k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-state-hover,
.k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-state-hovered,
.k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button:hover {
    background-color: var(--kendo-color-info-hover, #215FCA);
    background-image: none
}

.k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-focus,
.k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-state-focus,
.k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button.k-state-focused,
.k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-decrease.k-button.k-icon-button:focus {
    background-color: var(--kendo-color-info-active, #1B4EA7);
    background-image: none
}

.k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-focus,
.k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-state-focus,
.k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button.k-state-focused,
.k-numerictextbox.k-input.k-input-outline .k-spin-button.k-input-spinner .k-spinner-increase.k-button.k-icon-button:focus {
    background-color: var(--kendo-color-info-active, #1B4EA7);
    background-image: none
}

2. Import the file into your ThemeBuilder project.

3. Export the theme and test the changes againts your UI for Blazor project.

 

 

Regards,
Nick Iliev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status