CodeAve.com/CSS - Form Colors

CodeAve.com - CSS - Miscellaneous

ASP
JavaScript
CSS
·Basics
·Page Display
·Text Display
·Script Writers
·Contents
·What's New?
HTML
Maps
Links
Mail List
Search
Sitemap

Form Colors

One of the limitations of HTML is that you could make the greatest looking web page, but the moment you place a form on that page for user input, it looked just like every other page with holes cut out of it for user input. CSS offer many ways in which you can “dress up” your user input forms. The following example will show how to add colors to the basic form inputs, text, text area, the dropdown menu, check boxes and input buttons.

•View the Output

•Text View

•Print View

•Mail this Link

<html>
<title>CodeAve.com - Form Colors</title>
<body bgcolor="#FFFFFF">
<center>
<form name="CSS_Color_Example">


<b>Drop Down Menu</b><br>
<select name="selectname" SIZE="1">
<option style="background-color:#FF0000;">
Red background, no text color specified</option>
<option style="background-color:#00FF00; color: #FFFFFF;">
Green background, White text</option>
<option style="background-color:#000000; color: #FFFF00;">
Black background, Yellow text</option>
<option style="color: #FF0000;">
No background color specified, Red text</option>
</select>


<p>
<b>Text Input Field</b>
<br>
<input type="text" size="40" style="background:#000000; color:#FFFFFF"
value="This text should be white with a black background">


<p>
<b>Textarea Input Field</b><br>
<textarea rows="4" cols="34" style="background:#FF0000; color:#0000FF">
This text should be blue with a red background</textarea>


<p>
<b>Radio Button and Check Box</b><br>
(Technically there is no background to these,<br>
but the surrounding area will accept background colors)<br>
<input type="radio" style="background-color:#0000FF;">
<input type="checkbox" style="background-color:#0000FF;">


<p>
<b>Button</b><br>
<input type="submit" value="Green Button with Blue Text"
style="background:00FF00; color:#0000FF">

</form>
</center>
</body>
</html>