The <textarea> element in HTML is used for multi-line text input, and it can be styled effectively within a grid column layout using CSS. To style it, you can control its appearance through properties like padding, border, and background color, and use grid layout properties to ensure proper alignment and responsiveness.
These are the following ways to style the textarea-element:
Table of Content
Basic Styling
In this approach, we are using basic styling for the textarea element within a grid column layout. The textarea is styled with padding, a border, and a background color to ensure it is visually distinct and easy to use. It is contained within a responsive grid layout, which adjusts its width and spacing.
Example: The below example uses Basic Styling to style textarea-element in a grid column.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style>
body {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
padding: 20px;
font-family: Arial, sans-serif;
}
h1 {
color: green;
}
h2 {
margin-top: 20px;
font-size: 1.2em;
}
.textarea-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
textarea {
padding: 12px;
border: 2px solid #4CAF50;
border-radius: 5px;
resize: vertical;
font-size: 16px;
font-family: 'Arial', sans-serif;
width: 80%;
max-width: 600px;
background-color: #f9f9f9;
line-height: 1.5;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="textarea-container">
<h2>Approach 1: Basic Styling</h2>
<textarea rows="4"
placeholder="Enter your text here..."></textarea>
</div>
</body>
</html>
Output:
Advanced Styling
In this approach, we are using advanced styling techniques to enhance the visual appeal of the textarea element. The textarea features a gradient background, a prominent border with rounded corners, and a subtle shadow for a modern, three-dimensional effect. Additional focus styling includes a color change and glowing effect to improve user interaction and visual feedback.
Example: The below example uses Advanced Styling to style textarea-element in a grid column.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advance styling</title>
<style>
body {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
padding: 20px;
font-family: 'Segoe UI', Tahoma,
Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
margin: 0;
}
h1 {
color: green;
margin-bottom: 20px;
}
h2 {
margin-top: 20px;
font-size: 1.4em;
color: #333;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.textarea-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
align-items: center;
justify-content: center;
}
textarea {
padding: 15px;
border: 1px solid #a3c2c2;
border-radius: 12px;
background: linear-gradient(145deg, #e0f7fa, #b2ebf2);
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2),
-4px -4px 6px rgba(255, 255, 255, 0.5);
resize: vertical;
font-size: 16px;
font-family: 'Segoe UI', Tahoma,
Geneva, Verdana, sans-serif;
width: 80%;
max-width: 700px;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
}
textarea:focus {
border-color: #00796b;
box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
outline: none;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="textarea-container">
<h2>Approach 2: Advanced Styling</h2>
<textarea rows="6"
placeholder="Type something here..."></textarea>
</div>
</body>
</html>
Output:
