O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Making a Web Form Print-Ready

Problem

You need to have a form that users can fill out online, or that they can print and then fill out offline, as shown in Figure 10-3.

An online form

Figure 10-3. An online form

Solution

First, create a print media stylesheet and a class selector that transforms the form elements so that they display black text and feature a 1-pixel border on the bottom.

For example, consider the following HTML code for an input text element:

<label for="fname">First Name</label>
<input class="fillout" name="fname" type="text" id="fname" />

To style the form element requires the following CSS rule:

<style type="text/css" media="print ">
.fillout {
 color: black;
 border-width: 0;
 border: 1px solid #000;
 width: 300pt;
}
</style>

For drop-down menus, hide the select element altogether and add some additional markup to help produce the bottom border:

<label for="bitem">Breakfast Item</label>
<select name="bitem" size="1">
 <option selected="selected">Select</option>
 <option>Milk</option>
 <option>Eggs</option>
 <option>Orange Juice</option>
 <option>Newspaper</option>
 </select><span class="postselect">  </span>

Then, in the CSS rules, convert the inline span element to a block element. This enables you to set the width of the span element and places the border at the bottom to equal that of the input elements in the preceding CSS rule:

<style type="text/css" media="print"> select { display: none; } ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required