Skip to main content

Styling Textarea

Below information and examples help you understand how to style a text area element of the form.

Basic Styling​

Native Text Area Element​

You can apply basic styles directly to the <textarea> element to make it visually appealing and consistent with your application's design.

textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.5;
}

Resizing Control​

By default, most browsers allow users to resize text areas. You can control this behavior using the resize property.

/* Disable resizing */
textarea {
  resize: none;
}

/* Allow vertical resizing only */
textarea {
  resize: vertical;
}

/* Allow horizontal resizing only */
textarea {
  resize: horizontal;
}

Placeholder Text​

You can use the placeholder attribute to display instructional text within the text area. To style the placeholder text, you can use the ::placeholder pseudo-element.

textarea::placeholder {
  color: #aaa;
  font-style: italic;
}

Interactive States​

You can also style the text area for different states like hover, focus, and disabled.

textarea:hover {
  border-color: #007bff;
}

textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

Accessibility​

  1. Labels: Always use <label> elements with a for attribute that matches the id of the text area.
  2. ARIA Attributes: Use ARIA attributes like aria-required or aria-labelledby for enhanced screen reader support.

Example HTML​

Here's how your HTML might look:

<label for="comments">Comments:</label>
<textarea id="comments" placeholder="Enter your comments here"></textarea>

Complete Example​

Combining all the above, here's a complete example:

index.html
<html>
  <head>
      <link rel="stylesheet" type="text/css" href="./main.css" >
  </head>
  <body>
      <header></header>
      <form>
          <span>
              <label for="fName">First Name</label>
              <input id="fName" name="fName" pattern="[A-Za-z]{3,}" type="text" >
          </span>
          <div>
              <p> Select your gender</p>
              <span>
                  <input id="male" type="radio" name="gender" >
                  <label for="male">Male</label>
              </span>
              <span>
                  <input id="female" type="radio" name="gender" >
                  <label for="female">FeMale</label>
              </span>
          </div>
          <div>
              <p> Select languages you can speak</p>
              <span>
                  <input id="english" type="checkbox" name="languages" >
                  <label for="english">English</label>
              </span>
              <span>
                  <input id="spanish" type="checkbox" name="languages" >
                  <label for="spanish">Spanish</label>
              </span>
              <span>
                  <input id="hindi" type="checkbox" name="languages" >
                  <label for="hindi">Hindi</label>
              </span>
          </div>
          <div>
              <p> Select your country</p>
              <span>
                  <label for="country">Country:</label>
                  <select id="country">
                      <option>Australia</option>
                      <option>Finland</option>
                      <option>India</option>
                      <option>Spain</option>
                  </select>
              </span>
          </div>
          <br/>
          <div>
              <span>
                  <label for="address">Enter your full address</label><br/>
                  <textarea id="address" placeholder="Enter your full address"></textarea>
              </span>
          </div>
        </form>
  </body>
</html>