HomeWork #5: Styling User Input Forms with CSS:
By: Joe Comunale
Return To Joe's HomeWork Control Panel...
Example #1:
Typical WebSite Contact Form: <legend element styled>
Name:
E-Mail:
Comments:
This message area background-color and Font are styled using the Following CSS ID Styling: #messagearea { background-color: #99ff99; /* Green Background Color */ font: 16px helvetica; /* Font Change */ } and called in the HTML via: <textarea id="messagearea" ....
Back To Top...
Example #2:
Member Info - Radio Buttons: <legend styled>
Male
Female
18-20
20-30
30-40
40-50
50-60
60+
Back To Top...
Example #3:
Pizza Toppings - Check Boxes: <legend styled>
Pepperoni
Sausage
Anchovies
Mushrooms
Onions
Green Peppers
Spinach
Back To Top...
Summary:
In Summary, it can be seen that many elements of a form can be re-styled via CSS.
However, not all elments are rendered the same way in various browsers.
These examples look quite a bit different going between IE8 and FireFox4... so be careful.
Back To Top...