So, You Want CSS Commands With Forms, Huh?

June 24, 1999
By Joe Burns

These commands will work on MSIE 4.0 Only!

Use these to jump around or read it all...

[Eeeeew! That's Gross!] [Background Color]
[Separate Text Color]
[Pop-Up Text Boxes onMouseOver]
[Colored Buttons]

First off, thanks to Azrael2013@aol.com for turning me onto these commands. I appreciate it.

If you haven't already, you may want to read through my tutorials So, You Want Cascading Style Sheets, Huh? and So, You Want A Form, Huh? before you attack this one. They'll help a great deal. That said, let's get started. Dig this fancy guestbook:

(Make a point of placing your pointer on any of the objects!)

Name::
Email::

Choose one:

Click on this pop-up box to open it up:

But you can still do it in text areas!

Eeeeew! That's Gross!

Agreed. It's quite bright, but it does the trick for this tutorial. Without looking directly into the awful colors, direct your attention up there one more time. There are four new things you can add to your MSIE guestbook forms:

Background Color
Separate Text Color
Pop-Up Text Boxes onMouseOver
Colored Buttons

Each of these are created using Style Sheet (see So, You Want Cascading Style Sheets, Huh? ) commands added right into the form element.
Let's take each in pecking order, shall we...?

Background Color

The background color is added to all of the items above through the background style command. Here's a basic text box with the command added to it:

<INPUT TYPE="text" SIZE="50" STYLE="background:00BFFF">

The command that does the trick is that STYLE="background:00BFFF" deal. Simply add that to any of the form elements, except radio buttons and checkboxes, and you get the color denoted by the hex code. For a whole lof hex codes, see the So, You Want A Basic Color Code, Huh? chart.
The reason you can't get color in the radio buttons or checkboxes is quite scientific and kind of difficult to understand -- they don't have backgrounds to color in. So far, so good? Stunning. Let's move along....

Separate Text Color

Notice above again that there is text in the boxes. That's fairly easy do do, as is changing the color of said text. Let's use the example above, but add some green text. It looks like this:

<INPUT TYPE="text" SIZE="20" STYLE="background:00BFFF" STYLE="color:00ff00" VALUE="This text appears in the box">

See the two new commands? I added them right after the background commands. They look like this: STYLE="color:00ff00" VALUE="This text appears in the box"
The VALUE= command denotes the text and the STYLE="color:----" denotes the color of the text. Use it for any form item that accepts text and you're good to go. Okay, is that stuck on a brain cell? Going forward....

Pop-Up Text Boxes onMouseOver

I think this is the coolest thing in this tutorial -- but then, I'm a very boring person. If you haven't already, go back up to the really loud colors and place your pointer on top of just about any of the items and a little text box pops up. It works the same way as the ALT command does with images. See the height and width tutorial ( So, You Want Faster Loading Pages, Huh? ) for more on that. But now this....
The little yellow box is created through a TITLE command. Here's one of the radio buttons from up above:

<INPUT TITLE="This text goes in the little yellow box" TYPE="radio" NAME="stuff" VALUE="choice_one">

That's not so tough, huh? It's a simple trade. You add in the TITLE="----" deal and the computer gives you the box. Supply and demand.

Colored Buttons

I have a whole tutorial on this at So, You Want A Colored Link Button, Huh? There was a time when my e-mail was full of requests for colored form buttons. There was no such thing at the time, so I created one through images and onClick JavaScripts. It's really involved and might not be worth the trouble. This, however, is so super simple I can't believe it (plus, I've already shown you how to do it)! Here's the code for the SEND button from up above:

<INPUT TITLE="Send it off to me" TYPE="button" STYLE="background:ff00ff" VALUE="Okay -- I'm done -- Send it!">

There you go. It's a simple submit button with many of the commands from above stuck in for good measure. And it didn't cost you a thing!