Are you bored with those plain-looking textarea boxes with just the plain narrow black border, white background and black text that we use to allow people to copy stuff easily? Well, now we can rejoice! Most browsers allow for decorative colored borders, colored backgrounds and colored and different styles of text around and inside textarea boxes, while a few others allow for some attributes to show. Microsoft's IE browser does allow all attributes, as they were the ones who invented the decorating of textarea boxes.
The textarea box above should show the following:
- text-align: center
- font-family: Times New Roman
- font-size: 14pt
- font-style: italic
- (font) color: #0000ff
- border: 4px groove #008080
- padding: 8px
- background-color: #ffffcc
For the second textarea box below, I changed the border width, and text color just to show you some variations, but the function of this textarea box remains the same: you can copy the codes from it that created the first box above.
The 4 pixel wide border of the first textarea box doesn't show its color very well with such a narrow border. The second textarea box should show a 10 pixel-wide border with a 4 pixel-wide inner "groove" that now shows the bluish color in the highlighted areas and the black in the shadowed areas.
There IS another way to make a colored border even more elaborate around textarea boxes. You simply stick them inside a colored table or two!
N.B. When you copy the codes for this last table plus textarea box combo, please close up space between the
< and the back slash / of the last </textarea> tag. I had to put a space in there to make the rest of this page show properly!
Textarea Box Tricks 1 ~ 2 ~ 3
| 
