Comment Box Colors

Related:
• Comment Box Code
• Comment Box Pictures
• Comment Box Borders
• MySpace Comment Box Code
• MySpace Comment Box Generator
• Add Comments to Website

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

MySpace Users: If you need a comment box for your MySpace profile, use the MySpace comment box code.

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.

Choose your colors with the HTML color picker.

<!-- HTML codes by Quackit.com -->
<form action="/html/tags/html_form_tag_action.cfm" method="post">
Comments:<br />
  <textarea name="comments" id="comments" style="width:160px;height:90px;background-color:#D0F18F;">
  Hey... say something!
  </textarea><br />
  <input type="submit" value="Submit" />
</form>

This results in:

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.

<!-- HTML codes by Quackit.com -->
<form action="/html/tags/html_form_tag_action.cfm" method="post">
Comments:<br />
  <textarea name="comments" id="comments" style="width:160px;height:90px;background-color:#D0F18F;color:#53760D;font:24px/30px cursive;">
  Hey... say something!
  </textarea><br />
  <input type="submit" value="Submit" style="background-color:#53760D;" />
</form>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/comment_box_code.cfm">Comment Box</a></p>

This results in:

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. The button is specified using the HTML input tag.

<!-- HTML codes by Quackit.com -->
<form action="/html/tags/html_form_tag_action.cfm" method="post">
Comments:<br />
  <textarea name="comments" id="comments" style="width:160px;height:90px;background-color:#D0F18F;color:#53760D;font:24px/30px cursive;">
  Hey... say something!
  </textarea><br />
  <input type="submit" value="Submit" style="background-color:#53760D;color:#D0F18F;" />
</form>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/comment_box_code.cfm">Comment Box</a></p>

This results in:

Scrollbar Color

Here, we change the color of the scrollbar (which appears when there's enough text). We do this with the 'scrollbar-base-color' property.

<!-- HTML codes by Quackit.com -->
<form action="/html/tags/html_form_tag_action.cfm" method="post">
Comments:<br />
  <textarea name="comments" id="comments" style="width:160px;height:90px;background-color:#D0F18F;color:#53760D;font:24px/30px cursive;scrollbar-base-color:#638E0D;">
  Hey... say something! (well, at least something that's long enough to make this comment box grow scrollbars...)
  </textarea><br />
  <input type="submit" value="Submit" style="background-color:#53760D;color:#D0F18F;" />
</form>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/comment_box_code.cfm">Comment Box</a></p>

This results in:

Note that the 'scrollbar-base-color' property (which specifies the color of the scrollbar) won't work on all browsers. It should work on Internet Explorer version 5.5 and above, but at the time of writing, it doesn't work in Firefox. More about about colored scrollbars.

More Comment Box Tricks!

You can also...

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/html/codes/comment_box_colors.cfm">Comment Box Colors</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites