Open In App

Onsen UI Textarea CSS Components

Improve
Improve
Like Article
Like
Save
Share
Report

Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. In this article, we will learn about how to include a textarea using Onsen UI. 

Textarea is a small area where users can write whatever they want for example comment box where users can write anything related to the topic.

Used Classes:

  • textarea: This class is used to create an area where users can write their views.
  • textarea–transparent: This class is used to create a transparent area where users can write whatever they want. 

Syntax:

<div class="textarea">
     ...
</div>

Example 1: In the below example, we will learn about how to include textarea using Onsen UI.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            Onsen UI Textarea CSS Components
        </h3>
        <br><br>        
        <textarea class="textarea" rows="4" 
                  placeholder="Textarea"></textarea>
    </center>
</body>
</html>


Output:

 

Example 2: In the below example, we will learn about how to include the textarea using Onsen UI.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
        Onsen UI Textarea CSS Components
        </h3>
        <br>
          
        <textarea class="textarea textarea--transparent" 
                   rows="3" placeholder="Textarea"></textarea>    
    </center>
</body>
</html>


Output:

 

Reference: https://onsen.io/v2/api/css.html#textarea-category



Last Updated : 05 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads