.
Developer Spot - Web Development Tutorials
arrowDeverloper Spot  Tutorials  CSS  Cascading Style Sheets (CSS); Backgrounds (part 2 of 2)  
 
Development Tutorials
ASP
CGI & Perl
CSS
HTML
Java
JavaScript
Linux
PHP
XML




More Resources
Web Hosting Articles
Web Development News
PHP Manual
Web Hosting Directory
Budget Web Hosting Linux Web Hosting Small Business Hosting
Windows Web Hosting Reseller Web Hosting Web Hosting Articles

Cascading Style Sheets (CSS); Backgrounds (part 2 of 2)

By Will Bontrager
2003-10-15
Reader Rating: 4 out of 5
Bookmark Print Version
The Background Behind INPUT and TEXTAREA Form Elements

The background of form INPUT and TEXTAREA fields can be a specific color or an image. To make all INPUT areas yellow and put an image in the TEXTAREA field, put this in the HEAD section of your web page:

<style type="text/css">
<!--
INPUT { background-color: yellow; }
TEXTAREA { background-image: url(image.jpg); }
-->
</style>

Now, all INPUT and TEXTAREA fields will contain the background you specified. Example:

<form>
Your Name:
<INPUT type="text">
Narrative:
<TEXTAREA cols="11" rows="5"></TEXTAREA>
<INPUT type="submit">
</form>

Because the submit button is also an INPUT field, it will have the same background as text input fields. If you prefer to have the background of the submit button be blue (for example, it could be any color or even an image), create a custom class and then specify that style for the submit button.


Article Pages:
Introduction
The Background of Divisions of the Web Page, Within DIV Tags
The Background of Tables
The Background Behind Sections of Text Content
The Background Behind INPUT and TEXTAREA Form Elements
Example for the HEAD section
The Background Behind Ordered and Unordered Lists
Here are examples for the HEAD area

Copyright 2004 Bontrager Connection, LLC


 Rate this article:   Poor          Excellent 


If you found this article interesting, you may want to read these as well:

» Cascading Style Sheets (CSS); Backgrounds (part 1 of 2)

» Cascading Style Sheets (CSS); Learning More

» Cascading Style Sheets (CSS); Getting Started



 
Development Tutorials: CGI & Perl - CSS - HTML - Java - JavaScript - Linux - PHP - XML
More Resources: Web Hosting Articles - Web Development News - PHP Manual