Comment Box Colors

This page contains examples of adding color to comment boxes. Feel free to copy and paste this code into your own website.

Background Color

You add color to your comment box using CSS. Here, we change the background color of the comment box. We do this by applying the CSS background-color property to the HTML <textarea> element.

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:96%;height:90px;padding:2%;font-size:1.2em;background-color:gold;">
Hey... say something!
</textarea>
<input type="submit" value="Submit">
</form>

Choose your colors with the HTML color picker.

Text Color & Size

Here, we change the color of the text inside the comment box. We do this by applying the CSS color property to the HTML <textarea> element. We also change the font, size, and lineheight of the text using the font property.

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:96%;height:90px;padding:2%;font:1.4em/1.6em cursive;background-color:gold;color:hotpink;">
Hey... say something!
</textarea>
<input type="submit" value="Submit">
</form>

Button Color

Here, we change the color of the submit button and its text. We do this by applying both the background-color and color properties to the button. We also apply the border to style the button's border. The button is specified using the HTML <input> tag (although we could just have easily used the <button> tag).

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:96%;height:90px;padding:2%;font:1.4em/1.6em cursive;">
Hey... say something!
</textarea>
<input type="submit" value="Submit" style="font-size: 14px;border:5px solid orange;background-color:gold;color:olive;">
</form>

Scrollbar Color

Here, we specify scrollbar properties which include changing the color of the scrollbar. We do this with a bunch of -webkit- properties (such as ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, and ::-webkit-scrollbar-track).

<!DOCTYPE html>
<html>
<head>
<title>Example</title>

<!-- CSS -->
<style>
textarea {
width: 180px;
height: 90px;
padding: 2%;
font: 1.4em/1.6em cursive;
background-color: greenyellow;
border: 1px solid yellowgreen;
}
::-webkit-scrollbar {
width: 18px;
}
::-webkit-scrollbar-thumb {
background: yellowgreen;
}
::-webkit-scrollbar-track {
background: background: yellowgreen;
border-left: 1px solid yellowgreen;
}
::-webkit-resizer {
background: yellowgreen;
} 
</style>

</head>
<body>

<!-- HTML -->
<textarea name="comments" id="comments">
Hey... say something long enough for this comment box to grow scrollbars!
</textarea>

</body>
</html>

The above example will only work on Chrome and other webkit based browsers. This is because it uses webkit extensions (i.e. the bit that goes -webkit-).

For more scrollbar examples, see HTML scrollbars.

For an explanation on customized scrollbars, see CSS scrollbars.

Comment Box Colors

Background Color

Text Color & Size

Button Color

Scrollbar Color

Related