HTML and CSS Reference
In-Depth Information
figure 6-26
creating the ordertype selection list
label text
selection
list options
◗
3.
Save your changes to the file.
You'll also want to set the style of the
select
element so that, like the input boxes
you created in the last session, it's floated alongside its label, and its font size and
margin space are set to match the layout of the survey form.
◗
4.
Go to the
forms.css
file in your text editor. At the bottom of the file, add the fol-
lowing code as shown in Figure 6-27:
/* Selection list styles */
select {
display: block;
float: left;
font-size: 0.9em;
margin: 7px 0px;
}
figure 6-27
style rule for the select element
displays the selection list as a block
floats the selection list on the left
sets the font size to 0.9 em
sets the margin space around the selection list
◗
5.
Save your changes to the style sheet file and then open the
survey.htm
file in
your Web browser. The survey form now displays a selection list for the type of
order (see Figure 6-28). Click the selection list arrow and verify that all of the
order type options are shown.
The default width of the
selection list is equal to
the width of the longest
selection option; you can
set a different width using
the CSS
width
property.
