Textarea Styling

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

As of the R1 2022 release, the TextArea 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-textarea and the k-textbox classes were used to style an element to look like a TextArea component.

<span class="k-textarea">
    <textarea class='k-textbox'></textarea>
</span>

In the current rendering, we use multiple classes. Each class is responsible for 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 textarea element:

  <!-- 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 more information about the available styling options and their values, visit the Appearance article of the TextArea 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

• Components Rendering Overview
• TextArea Appearance