Textarea Styling
In this article, you will find out how to style the HTML textarea element in order to achieve the same appearance as the Kendo TextArea component.
As of Kendo UI R1 2022, the Kendo TextArea uses brand new rendering.
For additional information regarding the decision behind these changes, visit the Styling Components article.
Old vs New Rendering
With the old rendering, the k-textarea class held all the styling information related to the textarea wrapper and the k-textbox class applied additional styling to the textarea element itself.
<span class="k-textarea">
<textarea class='k-textbox'></textarea>
</span>
Currently, styles are split in multiple class names. Each class is scoped to a single textarea appearance property:
-
The following classes are applied to the wrapping element of the
textarea:<!-- Wrapper --> <span class="k-textarea k-input k-input-md k-rounded-md k-input-solid k-resize-none"> </span> -
The following classes are applied to the
textareaelement:<!-- Textarea element --> <textarea class="k-input-inner k-overflow-auto">Placeholder text</textarea>
The following example demonstrates the complete HTML structure:
<span class="k-textarea k-input k-input-md k-rounded-md k-input-solid k-resize-none">
<textarea class="k-input-inner k-overflow-auto">Placeholder text</textarea>
</span>
For additional information regarding the available values for each appearance property, visit the Appearance article of the Kendo TextArea.
Visual Backwards Compatibility
In order to achieve the same look and feel as the old rendering, the element references must be updated. Visit the CSS Classes Migration and JQuery Selectors Migration sections of the Styling Overview article for additional information.