CSS: Basic Form Styling

On of the awesome things about CSS is the ability to style forms. Forms in the plain, for CSS developers are like mashed potatoes without and gravy. A lot more people know how to stylize forms as CSS is getting more usable, due to browser support. So get ready for some CSS form styling, along with a few tricks.

Let’s Get Started

Ok, so you want to start out with the basics, right? Well think about what a form consists of: textbox, textarea, radio buttons, checkboxes, drop-down boxes, and fieldsets. I am not going to show any output, only source code, because I want you to try these on your own. So many things to style, so many color schemes, well what are you waiting for? Ok, so let’s start with the easiest and most useful of all, textboxes.

For Beginners Sake: The Form

Before I go on, to set up a basic form, you must include the open and close tags of the form tag. Usually, you also include a few attrubutes that are required if you are getting or posting data from the user. For basics sake, here is the markup to create a basic form:

XHTML

<form method="post" action="success.php>
        <!-- form contents goes here -->
</form>

Textboxes

If you have a form on your site and you are asking the user for input, you will more than likely have a textbox on your site; not always, but 99% of the time you will. A textbox is one of those input fields that looks like you are going to type in your name into a program of some sort. (Before I go on, this article covers in-depth discussion on CSS form styling, but is also intended for the beginner user as well; so be patient.) To create a textbox you use the following code in between your open and close form tags (see topic For Beginners Sake: The Form):

XHTML

<input type="text" name="name" />

Ok so thats a basic text box, with no text in front of it; just a text box. Since we are discussing the styling of text boxes, I am not going to add the text part until I get to the more advanced styling. Right now I just want to show the user how to actually style the form objects first. So what if you wanted to make the background of the textbox a mild grey, blue trebuchet ms font with a size of 10 pixels (bold), change the padding of the textbox, and the border to 3 pixels with a color of dark blue. Simply use the following CSS:

CSS

.textboxStyled {
      background:#ccc;
      font:10px "Trebuchet MS", verdana, tahoma, sans-serif;
      color:#000080;
      font-weight:bold;
      padding:2px;
      border:3px #000080 solid;
}

As you can see, this is a class, so you would put it in your textbox markup as:

XHTML

       <p>Name:
       <input type="text" name="name" class="textboxStyled" /></p>

So that is how you style a textbox, let’s go style a textarea now!

Text Areas

Ok, so what is a textarea? A text area is usually where you type in a message to send. It allows you to type in content (text) and has scrollbars. You usually see these when you are replying to a post, or commenting of something; the textarea would be your message (you can see this on my site, if you comments; it is there).

Styling a textarea is the same for the textbox. In fact, I will use the same code for the textbox to style it. First, though, this is how you create the textarea.

XHTML

Comments:
<textarea cols="50" rows="10" name="comments" />

So, now that we have the textarea, we can style it just the way we did with the textbox. (note the class difference):

CSS

.textareaStyled {
      background:#ccc;
      font:10px "Trebuchet MS", verdana, tahoma, sans-serif;
      color:#000080;
      font-weight:bold;
      padding:2px;
      border:3px #000080 solid;
}

Now that we have the styling snippet, how about referencing the class to our XHTML:

XHTML

      <p>Name:
      <input type="text" name="name" class="textboxStyled" />
</p>

There you have it! A awesomly styled textarea; looks better than the plain version. Now that we have that, let’s go style us a radio button.

Radio Buttons

Radio buttons are seen all over the web and are very popular for web forms. These are those little buttons used to make single choices (not multiple-choices). In this example, yes, you can choose muliple instances of the radio button, but they area actually all different names, so if you were actually code these, there would be four different answers to each property. These are extremely useful when programming. Let’s stick to the web right now, though. First off, let’s create the radio button (just a reminder that you should be inserting these XHTML code snippets between the open/close form elements in your XHTML document).

XHTML

<p>Options:
      Opt 1:
      <input type="radio" name="opt1" />
      Opt 2:
      <input type="radio" name="opt2" />
      Opt 3:
      <input type="radio" name="opt3" />
      Opt 4:
      <input type="radio" name="opt4" />
</p>

Wow! Pretty boring huh? What if we were to give it a background of dark blue? Well, let’s see. Just a note, there really isn’t much you can do to style a radio button (or checkboxes later) because there really isn’t many things to style on the element itself; it’s small and to the point. For this example there will only be one type of styling. So let’s give it some style (again notice the class difference):

CSS

.radioStyled {
      background:#000080;
}

As always, you have to reference the class in the element itself, so add the class name to the radio buttons:

XHTML

<p>Options:
      Opt 1:
      <input type="radio" name="opt1" class="radioStyled" />
      Opt 2:
      <input type="radio" name="opt2" class="radioStyled" />
      Opt 3:
      <input type="radio" name="opt3" class="radioStyled" />
      Opt 4:
      <input type="radio" name="opt4" class="radioStyled" />
</p>

There you are! Now, let’s do the same with the checkboxes.

Checkboxes

Checkboxes are very similiar to radio buttons. So what exactly is the difference? The difference is the fact that you can select multiple options that the user can select. Since a checkbox is the almost identical to a radio button, we are just going to style it just like the radio button. We will give it a background of dark blue. First, create the plain, check boxes:

XHTML

<p>Options:
      Opt 1:
      <input type="checkbox" name="opt1" />
      Opt 2:
      <input type="checkbox" name="opt2" />
      Opt 3:
      <input type="checkbox" name="opt3" />
      Opt 4:
      <input type="checkbox" name="opt4" />
</p>

Yuck, how did we ever get by like that? Oh yea, the browsers… So, now we have our checkboxes, now let’s style them just like the radio buttons (class change):

CSS

.checkStyled {
      background:#000080;
}

Alright, now with that code, let’s reference the class in the XHTML snippet, like so:

XHTML

<p>Options:
      Opt 1:
      <input type="checkbox" name="opt1" class="checkStyled" />
      Opt 2:
      <input type="checkbox" name="opt2" class="checkStyled" />
      Opt 3:
      <input type="checkbox" name="opt3" class="checkStyled" />
      Opt 4:
      <input type="checkbox" name="opt4" class="checkStyled" />
</p>

Drop-Down Boxes

Drop down boxes are used a lot. A drop-down box is one of those boxes with the down arrow that allows the user to select one of the choices (yes there is a way to do multiple, but not in this example). These are used a lot in programming and XHTML. Drop-down menus are also used alot with JavaScript; very useful. So, again, let\’s start off with another plain version of a drop-down box:

XHTML

<p>Select One:
      <select name="dropdown">
         <option>Option 1</option>
         <option>Option 2</option>
         <option>Option 3</option>
         <option>Option 4</option>
      </select>
</p>

Yes, horrible I know, but let’s see what we can do to make it look better. For this example, I will style the drop-down box as a trebuchet ms bold white font of 12 pixels, and the background will be dark blue. Here is the CSS (class difference):

CSS

.dropdownStyled {
      background:#000080;
      font:12px "Trebuchet MS", verdana, tahoma, sans-serif;
      color:#fff;
      font-weight:bold;
}

Now reference your class to the XHTML snippet:

XHTML

<p>Select One:
      <select name="dropdown" class="dropdownStyled">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
          <option>Option 4</option>
       </select>
</p>

Now that’s what I call a beautiful drop-down menu! Of course, these are practical examples, and better styling can be done. Just remember, when trying to style a drop down menu, you cannot style the borders or the drop-down menu, it won’t let you. I believe Mozilla does with some additional styling properties, but all other browers do not support this. Now let’s go onto the last form example, the fieldset element!

Fieldsets

Fieldsets, in my own opinion, is organizational content for form information. Fieldsets were used a lot earlier in HTML 4.0, and now not used that much. I have still seen it used, but they aren’t what they appear to be. Earlier on you probably saw them as you were ordering products off the internet. You will see in the following example:

XHTML

<fieldset>
      <legend>Credit Cards</legend>
         Visa: <input type="radio" name="visa" />
         Master Card: <input type="radio" name="mc" />
         Discover: <input type="radio" name="disc" />
</fieldset>

Simple and to the point. As you can see though, it really does organize the content and put’s certain choices all in one spot. Since this is CSS 2 and browsers are being more compliant, we want to create something more appealing. Something to help us get out point across and look good. We can create a header (not by using the heading tags) and take off the boundary making it more appealing to the user, also the line will be dark blue. Here’s the CSS (style change):

CSS

.fieldsetStyled {
      border-top:2px #000080 solid;
      border-left:0px;
      border-right:0px;
      border-bottom:0px;
}

Now let’s do what we have been doing ever since step one and reference the class into your XHTML snippet:

XHTML

<fieldset class="fieldsetStyled">
      <legend>Credit Cards</legend>
         Visa: <input type="radio" name="visa" />
         Master Card: <input type="radio" name="mc" />
         Discover: <input type="radio" name="disc" />
</fieldset>

That looks better doesn’t it? Of course, you could make this so much better and I am only trying to get the concept out there; not doing a whole makeover. This part of the article has come to a conclusion, but I am going to share with you two small, but very useful tricks you can use on your site, using CSS.

Label It!

How many times do you fill out forms on a webpage? How many times do you think that you have to click into a textbox or textarea? Some people, like me, just use the tab button, but others may use their mouse. Also, like me, I want my site to conform to the Accessibility Statement, so I code to make this possible. The label tag helps me out in this area. Simply, the label tag allows the user to click on the text off to the side of a form element and it will automatically place the cursor in the field that the label was assigned to. So, say you have a textbox with the word Full Name beside it. If the user clickes Full Name, the cursor automatically is placed inside the corresponding textbox. Best of all: NO programming required! So let’s start off with the form:

XHTML

<form name="form" id="form">
<p>
      <label for="name"&gt;Full Name:&lt;/label&gt; &lt;br /&gt;
      <input type="text" size="30" name="name" id="name" /&gt;
</p>
      <p>
         <fieldset>
             <legend>Credit Cards</legend>
                  <label for="visa">Visa: </label>
                  <input type="checkbox" name="visa" id="visa" />
                  <label for="mc">Master Card: </label>
                  <input type="checkbox" name="mc" id="mc" />
                  <label for="disc">Discover: </label>
                  <input type="checkbox" name="disc" id="disc" />
          </fieldset>
       </p>
</label></p></form>

Wow, thats what I call structured mark-up! What actually allows for this are two attributes; one from the input tag and the other from the label tag. They have to talk to each other. The first attribute is the id attribute that the input tag uses; this assigns a name (the label tag only accepts the id attribute, not the name attribute). As seen here:

XHTML

<input type="checkbox" name="visa" id="visa" />

The other attribute that completes the label example is the for attribute. The value that goes in the for attribute is the id of the input that I discussed above. So, an example would be:

XHTML

<label for="visa">Visa: </label>

Now you know how to create an accessible and very robust form. Of course, your form would have much more, but as this example is to just show a practical example.

<img>ine the possibilities!

Okay, so you have a respectable form, right? It’s styled, and looks awesome! What more could you want? Well, my last addition to this article is placing a small image, icon, if you wish into a form textbox and give it padding to start after the image. Nifty eh? How about giving it a 10px verdana font of orange and a border of 1 pixel dark blue. Sound daunting? It really isn’t. Before I go on, you will need a 16 x 16 pixel image, like i said, probably a small icon of some sort. Make sure you know where this image is, because you are going to use it from your CSS file. Here is the form first:

XHTML

      <div id="form">
          <form name="form" id="form">
          <p>
            <label for="name">Full Name:</label>
            <input type="text" size="30" name="name" id="name" />
          </p>
          </form>
      </div>

There’s the form; pretty ugly huh? Great semantics, ugly style. Let’s change that and create some beautiful styles! Here’s the CSS:

CSS

#form {
      margin:10px 0 0 10px;
      font:14px "Trebuchet MS", verdana, tahoma, sans-serif;
      color:#004364;
      font-weight:bold;
}
input {
      font:10px normal tahoma, verdana, arial,sans-serif;
      padding-left:20px;
      padding-top:3px;
      padding-bottom:3px;
      background:url(\'path_of_image_icon.gif\') no-repeat 2%;
      border:2px #0080c0 solid;
}

Now that was awesome! Useful too, might I add. I will be incorporating it into the Dev-News website. More than likely, this has been done somewhere else, but I haven’t seen it yet.

Conclusion

This brings me to the conclusion of the article “CSS: Styling Forms”. I hope it helped you out, or just inspired you in some way. None-the-less, it helped out some people. Continue to style your forms, and remember that the only limit is your imagination. Happy CSS coding, and remember to keep those files validated!