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 the CSS width, height, and padding properties to have a well-structured comment box.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of changing the background color of the comment box:

<!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 action="/form/submit" method="POST">
      <textarea class="comment">Type your comment here.</textarea>
      <br>
      <input type="submit" name="submit" value="Send">
    </form>
  </body>
</html>

Result


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

Example of changing the text color and size within the comment box:

<!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 action="/form/submit" method="POST">
      <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 of adding a background image to the comment box:

<!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 action="/form/submit" method="POST">
      <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 of adding borders to the comment box:

<!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 action="/form/submit" method="POST">
      <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 of adding a left border to the comment box:

<!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 action="/form/submit" method="POST">
      <textarea class="comment"> Type your comment here.</textarea>
      <br>
      <input type="submit" name="submit" value="Send">
    </form>
  </body>
</html>