W3docs
en
Log in

How to Style Comment Box Using CSS

Style comment boxes, change the background color, add a background image or set borders to your comment box. See all with examples.

Tags

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.

Example of changing the background color of the comment box:

Example of changing the background color of a Comment Box | CSS Snippets | W3Docs

<!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>
Try it Yourself »

Result

<div class="demo mt-1 mb-5 not-prose"> <form action-xhr="/form/submit" method="POST"> <textarea class="comment">Type your comment here.</textarea>
<input name="submit" type="submit" value="Send">``</input> </form> </div>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:

Example of changing the text color and size of a comment box | CSS Snippets | W3Docs

<!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>
Try it Yourself »
Tip

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:

Example of adding a background image to a Comment Box | CSS Snippets | W3Docs

<!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>
Try it Yourself »
Tip

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.

Tip

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:

Example of adding Add Borders to a Comment Box | CSS Snippets | W3Docs

<!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>
Try it Yourself »

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

Tip

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:

Example of using the border-left CSS property to have only left border of a comment box | CSS Snippets | W3Docs

<!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>
Try it Yourself »