Submit Your Article
Home Articles News Tutorials Videos Add An Article
Topics: Design Photoshop Programming PHP CSS Java Database Web Development Javascript Ajax
– Close + Open

Find Out More About DevWebPro!

Sign up for the newsletter


» Terms & Conditions

Welcome to the New DevWebPro!

DevWebPro Includes:
  Hundreds Of Tutorials   Developer News
  Unique Gadget Videos   Tons of Topics to Discuss
  Expert Advice   We Will Publish Your Articles

Custom Text Area Backgrounds

By: Derald
Monday, May 19th, 2008
Text: Decrease Font Size Increase Font Size | Print Print Article | Share: Delicious Digg StumbleUpon Post to Twitter Post to Facebook

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.

Topics: , ,

About the Author:

Leave a Comment

DevWebPro is an iEntry Network ® publication - © 1998-2010 All Rights Reserved