Styled multi-line text inputs (textareas)

This page is related to the article Styling even more form controls. For more info on what the images on this page show, please read that article.

The following CSS rules were used to style these textareas:

  1. #el01 {color:#00f;}
  2. #el02 {background-color:#ddd;}
  3. #el03 {color:#fff; background-color:#33b;}
  4. #el04 {border-width:4px;}
  5. #el05 {border-color:#00f;}
  6. #el06 {border:0;}
  7. #el07 {font-family:"Courier New", Courier;}
  8. #el08 {font-size:150%;}
  9. #el09 {font-size:10%;}
  10. #el10 {font-weight:bold;}
  11. #el11 {padding:0;}
  12. #el12 {margin:0; text-align:right;}

All textareas were set to be 12 columns wide and 3 rows tall to reduce the size of the screen shots. In your current browser, with your current settings, the multi-line text inputs look like this:

And here are screenshots from several browsers on different operating systems:

Moz/FF Mac

Mozilla/FF Mac

IE Mac

IE Mac

Opera Mac

Opera Mac

Safari

Safari

Camino

Camino

IE Win 2k

IE 6 Win 2k

Moz/FF Win 2k

Mozilla/FF Win 2k

Opera Win2k

Opera Win 2k

IE Win XP

IE 6 Win XP

Moz/FF Win XP

Mozilla/FF Win XP

Opera Win XP

Opera Win XP

As you can see, the results vary a lot between browsers and operating systems.

Lab Index | 456 Berea Street Home | Copyright © 2003-2014 Roger Johansson