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...