New to Telerik UI for ASP.NET MVC? Download free 30-day trial

TextBox Styling

In this article, you will find information on how to apply predefined classes the HTML input element, to achieve the appearance of the TextBox for ASP.NET MVC.

As of the R1 2022 release, the TextBox component uses a new rendering.

For more details on the decision behind the new rendering, visit the Components Rendering Overview article.

Old vs New Rendering

In the old rendering, the k-textbox class was used to style an input element to look like a TextBox component.

 <!-- OLD -->
<input class="k-textbox" />

The new rendering of the component consists of a wrapping span element and an input element nested in the span element.

The span element controls the overall appearance of the widget and has the following classes:

<!-- NEW -->
<span class="k-input k-textbox k-input-flat k-input-md k-rounded-md" >
</span>

The following example demonstrates the complete HTML structure of the TextBox:

<span class="k-input k-textbox">
    <input id="textbox" data-role="textbox" class="k-input-inner" placeholder="Name">
</span>

For more information about the available styling options and their values, visit the Appearance article of the TextBox component.

Visual Backwards Compatibility

In order to achieve the same look and feel as the old rendering, make sure to use the classes available in the new rendering. Visit the CSS Classes Migration and JQuery Selectors Migration sections of the Appearance Overview article for additional information.

See Also

In this article