Textarea CSS
CSS is all about presentation. Discover how Textarea CSS works to transform plain HTML into a premium user experience in the guide below.
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:
<textarea rows="number-of-rows" cols="number-of-columns"></textarea>
The <textarea> i s 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:
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:
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 .
