Custom Text Area Backgrounds

If you're new here, you may want to subscribe to my RSS feed.

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.

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.

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.

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.