So, just like all the other controls on this
page, I give the Submit button input a div parent.
So now that you understand how a form is marked up, let??™s get stylin??™.
Form Styling
Here??™s the CSS for the form shown in Figure 6.12. There is nothing
here you haven??™t seen before. Most of the ?¬‚ oating is used to wrap
divs around inner ?¬‚ oated elements. This saves me from having to
resort to using the clear?¬? x code I described in Chapter 4.
h3 {margin-top:.5em;}
form {
?¬‚ oat:left;
width:24em;
margin:20px 0 0 50px;
padding:1em .75em .5em;
border:1px solid #AAA;
}
div.formsection {
?¬‚ oat:left;
width:100%;
border-bottom:1px solid #AAA;
}
input {
font-size:.8em;
}
input:focus, textarea:focus, select:focus {
border:2px solid #7AA;
}
label {
enclose the formsection divs
temporary style for this demo??”
moves the form from T/L corner
of page
encloses the form control and
label set
makes the ?¬‚ oated element full
width
makes the ?¬? eld highlight when
clicked in
DESIGNING INTERFACE COMPONENTS 199
display:block;
clear:both;
font-size:85%;
font-weight:bold;
margin:.5em 0 0;
padding-bottom:.5em;
}
input[type="submit"] {
?¬‚ oat:right;
margin:.5em 0;
}
.buttongroup {
?¬‚ oat:left;
}
.buttongroup input {
?¬‚ oat:left;
clear:both;
margin:0;
padding:0;
line-height:0;
}
.buttongroup label {
background-color:none;
width:24em;
?¬‚ oat:left;
margin:0 0 0 .
Pages:
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238