Textarea CSS

We will comprehend the textarea CSS in this article. Let us understand the textarea first.

Textarea

The "textarea" is the HTML element that is utilized to construct a multiple-line text input area within the form.

Syntax:

The <textarea> is the opening tag, and </textarea> is the closing tag in the above-given syntax. The "rows" and "cols" are the attributes that define the size of the text area. The "rows" attribute defines the number of rows, and the "cols" attribute specifies the number of columns.

Use of <textarea> Element

It permits users to input large amounts of text. It is utilized in many places, which are given below:

Message box: It is utilized to construct a message box where users can write and send long messages.
Comments and feedback: It is utilized when constructing comments and feedback forms so that users can enter comments and feedback.
Address field: It is utilized in the form to construct an address field so that users to input a multi-line address.
Description box: It is utilized to construct a description box to describe something in detail.

Demonstration of <textarea> Element:

We will construct the textarea in this demonstration utilizing the <textarea> tags.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>textarea</title>
</head>
<body>
    <h1>The textarea HTML element</h1>
    <label for="message">Write your message:</label> <br> <br>
    <textarea name="message" id="message" cols="50" rows="4"></textarea>
</body>
</html>

Output:

Here is the output in which we can witness the text area.

We will now comprehend the textarea CSS.

Textarea using CSS

The textarea CSS means giving style to the <textarea> element. We can apply style to the <textarea> element and make it more attractive with the help of CSS (Cascading Style Sheets). We can alter the visual appearance of the <textarea> element utilizing CSS properties.

Illustrations of the Textarea CSS

We will comprehend how to construct a styled text area with the help of illustrations.

Illustration 1:

We will put style to the <textarea> element in this illustration. We will utilize the following CSS properties to style the <textarea> element, which are font-family, font-size, padding, border, border-radius, and box-shadow.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Textarea CSS</title>
    <style>
        textarea {
            font-family: 'Times New Roman', Times, serif;
            font-size: 18px;
            padding: 15px;
            border: 2px solid red;
            border-radius: 6px;
            box-shadow: 4px 4px red;

        }
    </style>
</head>
<body>
    <h1>The textarea CSS</h1>
    <label for="message">Write your message:</label> <br> <br>
    <textarea name="message" id="message" cols="50" rows="4"></textarea>
</body>
</html>

Output:

Here is the result where we can witness the text area which looks stylish.

Illustration 2:

We will construct a Student Registration Form consisting of a <textarea> element that we will style utilizing CSS.

Code:

<!DOCTYPE html>
<html lang="en">
<head>  
    <title>Student registration form with a <textarea> element</title>
    <style>
        body {
            background-color: bisque;
            font-family: 'Courier New', Courier, monospace;
            font-size: 15px;
            font-weight: 900;
            margin: 20px;
        }
        h1 {
            color: rgb(167, 57, 160);
        }
        textarea {
            font-family: 'Times New Roman', Times, serif;
            font-size: 15px;
            padding: 12px;
            border: 2px solid rgb(167, 57, 160);
            border-radius: 6px;
            box-shadow: 4px 4px 4px rgb(167, 57, 160);
        }
    </style> 
</head>  
<body>
    <h1>Student Registration Form</h2>
    <form>
        <label for="first-name">First Name :</label>
        <input type="text" name="first-name" size="15"/> <br> <br>
        <label for="middle-name">Middle Name :</label>
        <input type="text" name="middle-name" size="15"/> <br> <br>
        <label for="last-name">Last Name :</label>
        <input type="text" name="last-name" size="15"/> <br> <br>
        <label for="course-name">Course Name :</label>
        <select>
            <option value="Course">Select the Course</option>
            <option value="BA">BA</option>
            <option value="MA">MA</option>
            <option value="BCA">BCA</option>
            <option value="MCA">MCA</option>
            <option value="MBA">MBA</option>
            <option value="B.Tech">B.Tech</option>
            <option value="M.Tech">M.Tech</option>  
        </select> <br> <br>  
        <label>Gender :</label> <br>  
        <input type="radio" name="male"/>Male<br>  
        <input type="radio" name="female"/>Female<br>  
        <input type="radio" name="other"/>Other  <br> <br>  
        <label>Mobile No. :</label>  
        <input type="text" name="country code"  value="+91" size="2"/>   
        <input type="text" name="mobile" size="10"/> <br> <br>  
        <label for="home-address">Home Address:</label>  
        <br>  
        <textarea cols="50" rows="4" value="address"> </textarea>  
        <br> <br>  
        <label for="email-address">Email Address:</label>  
        <input type="email" id="email" name="email"/> <br> <br>  
        <label for="password">Password :</label> 
        <input type="Password" id="pass" name="pass"> <br> <br>  
        <label for="confirm-password">Confirm Password :</label>  
        <input type="Password" id="confirmpass" name="confirmpass"> <br> <br>  
        <input type="button" value="Submit"/> 
    </form>  
</body>  
</html> 

Output:

We can witness a Student Registration Form with a <textarea> element that has been styled using CSS properties.

Illustration 3:

We will construct a Contact Us Form consisting of a <textarea> element, which is styled utilizing CSS.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Contact us form with the <textarea> element</title>
    <style>
        body{
            height: 100%;
            padding: 0;
            margin: 0;
            font-family: 'Courier New', Courier, monospace;
        }
        h1{
            margin: 0 auto;
            font-family: 'Courier New', Courier, monospace;
            font-size: 4em;
            font-weight: 900;
            margin-top: 30px;
            width: 50%;
            color: rgb(58, 219, 66);
            text-align: center;
        }
        textarea {
            font-family: 'Times New Roman', Times, serif;
            font-size: 18px;
            padding: 15px;
            border: 2px solid rgb(57, 167, 117);
            border-radius: 10px;
            box-shadow: 4px 4px rgb(57, 167, 117);
                }
        #contact-us-form {
            height: 100%;	
            background-color: rgb(238, 154, 81);
            position: relative;
            overflow: hidden;
        }
        form {
            margin: 0 auto;
            width: 50%;
            position: relative;
            padding-top: 35px;
            color: white;   
        }
        #name, #email {
            padding: 10px;
            width: 490px;
            border-radius: 10px;
            border: 2px solid rgb(57, 167, 117);
        }
        input[type="submit"] {
            background-color: rgb(58, 219, 66);
            color: white;
            height: 45px;
            width: 150px;
            font-size: 24px;
            text-align: center;
            cursor: pointer;
            margin-top: 25px;
        }
        label {
            font-size: 1.5em;
            padding-left: 15px;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <header>
        <h1>Contact us</h1>
    </header>
    
    <div id="contact-us-form">
    
    <form id="contact-us">
    
    <div class="formgroup" id="name-form">
        <label for="name">Your name:</label> <br>
        <input type="text" id="name" name="name" />
    </div> 
    
    <div class="formgroup" id="email-form">
        <label for="email">Your e-mail:</label> <br>
        <input type="email" id="email" name="email" />
    </div>
    
    <div class="formgroup" id="message-form">
        <label for="message">Your message:</label>
        <textarea id="message" name="message" rows="3" cols="50"></textarea>
    </div>
    
        <input type="submit" value="Send!" />
    </form>
    </div>
</body>
</html>

Output:

We can witness the Contact Us Form with the text area which has been styled using CSS properties.

Illustration 4:

We will construct the Comments and Feedback Form consisting of a <textarea> element, which we will style utilizing CSS.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Comments and feedback form</title>
    <style>
        body {
            font-family: 'Courier New', Courier, monospace;
            background-color: brown;
            color: yellow;
            text-align: center;
        }
        form {
            color: white;
            font-weight: 600;
            font-size: 18px;
        }
        textarea {
            font-size: 15px;
            padding: 12px;
            border: 2px solid yellow;
            border-radius: 6px;
            box-shadow: 4px 4px 4px yellow;
        }
        input[type="submit"] {
            width: 90px;
            height: 35px;
            color: brown;
            background-color: yellow;
            font-size: 15px;
            font-weight: bold;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <h1>Comments and Feedback Form</h1>
    <form>
        <label for="name">Your name:</label>
        <input type="text" id="name" name="name"> <br> <br>
        <label for="email">Your email:</label>
        <input type="email" id="email" name="email"> <br> <br>
        <label for="comments-feedback">Comments and Feedback:</label> <br> <br>
        <textarea id="comments-feedback" name="comments-feedback" placeholder="Type your comments and feedback" cols="30" rows="6"></textarea> <br> <br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Output:

We can witness the Comments and Feedback Form with the style provided on the form using CSS properties.

Browser Support

Following are the web browsers that support <textarea> element:

Google Chrome
Safari
Internet Explorer
Opera
Microsoft Edge
Firefox

Conclusion

We have understood the textarea CSS in this article with the help of illustration. We have comprehended how to create a text area on the webpage utilizing the <textarea> tag and then learned how to apply CSS on the <textarea> element.

Next TopicVW in CSS

← prev next →