Custom Text Area Backgrounds

Browsing the web, you may have noticed that there are sites where text areas have different color backgrounds. This allows the create of the site to add more of a custom look to the site.

The CSS to create this effect is very simple. It is just a few lines of CSS code that will allow us to achieve the look of that we are wanting, that is shown below.

input.color{
background-color: #C0C0C0;
}

There it is, just that simple. Just a background-color attribute we can change the background color of the text area. The HTML part of the code is very simple also, let’s take a look at it.

<input type=”text” class=”color”> </input>

When creating a form, you can make the background of the required fields a different color than the other fields. This will bring attention to those fields, and if you add some text to explain why the fields have different colors it can create a user friendly form. Below is an example of using the different color backgrounds for a form.

All forms with a red background are required to be filled out.

Name:
Email:
City:   
State:

If wanted, you could like to an image to make the background even more customized. Just use the background attribute and like to an image with the url() value.

Leave a comment