How to Style Comment Box Using CSS

While creating different types of forms you will need to give styling to them to have a more attractive impact on users who are going to fill the form. We will discuss the following aspects of styling forms:

  1. How to change the background color of your comment box?
  2. How to add a background image to your comment box?
  3. How to add borders to your comment box?

How to Change the Background Color of Your Comment Box?

If you want to change the background color of your comment box, first define a class for the <textarea> element for giving style to it, then use the CSS background-color property to define your preferred color. Also set width, height and padding CSS properties to have a well-structured comment box.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .comment {
      width: 40%;
      height: 100px;
      padding: 10px;
      background-color: #d0e2bc;
      }
    </style>
  </head>
  <body>
    <form>
      <textarea class="comment">Type your comment here.</textarea>
      <br>
      <input type="submit" name="submit" value="Send">
    </form>
  </body>
</html>

You can also change the text color and size for your comment box. For that purpose use the color and font CSS properties.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .comment {
      width: 40%;
      height: 100px;
      padding: 10px;
      background-color: #d0e2bc;
      font: 1.4em/1.6em cursive;
      color: #095484;
      }
    </style>
  </head>
  <body>
    <form>
      <textarea class="comment"> Type your comment here.</textarea>
      <br>
      <input type="submit" name="submit" value="Send">
    </form>
  </body>
</html>
Depending on your background, change the color and size of the text.

How to Add a Background Image to Your Comment Box?

For setting a background image to your comment box you will need to add the background-image CSS property to the style of your <textarea> element.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .comment {
      width: 40%;
      height: 100px;
      padding: 10px;
      background-image: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
      font:1.4em/1.6em cursive;
      color: #095484;
      }
    </style>
  </head>
  <body>
    <form>
      <textarea class="comment"> Type your comment here.</textarea>
      <br>
      <input type="submit" name="submit" value="Send">
    </form>
  </body>
</html>
You can easily resize the comment box according to what picture size you want. For that purpose, just change the values of width and height properties and set them to be the same or smaller to the image size. Alternatively, you can use the background-size property to define the size of the background image.

How to Add Borders to Your Comment Box?

For adding border to your comment box you just need to use the CSS shorthand border property. Choose your preferred border-style from here.

You can also define the border-width, border-style and border-color properties separately for your comment box.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .comment {
      width: 40%;
      height: 100px;
      padding: 10px;
      border: 3px dashed #8ebf42;
      background-color: #d0e2bc;
      font:1.4em/1.6em cursive;
      color: #095484;
      }
    </style>
  </head>
  <body>
    <form>
      <textarea class="comment">Type your comment here.</textarea>
      <br>
      <input type="submit" name="submit" value="Send">
    </form>
  </body>
</html>

Use the border-left CSS property if you want to have only a left border for your comment box.

Use the border-right, border-top, border-bottom properties correspondingly for having a specific border side.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .comment {
      width: 40%;
      height: 100px;
      padding: 10px;
      border-left: 6px solid #095484;
      background-color: #d0e2bc;
      font:1.4em/1.6em cursive;
      color: #095484;
      }
    </style>
  </head>
  <body>
    <form>
      <textarea class="comment"> Type your comment here.</textarea>
      <br>
      <input type="submit" name="submit" value="Send">
    </form>
  </body>
</html>

Do you find this helpful?

Related articles