Forms have a big impact on our day-to-day Internet lifestyle, so designers want to
control the look-and-feel of form elements in their web page designs. The problem is
that browsers manipulate the visual display of form elements from one browser to the
next. Even the same browser version can display a form element differently on separate
operating systems.
To help web developers determine the best way to design web forms, this appendix
documents a majority of the visual CSS properties and their effect on form elements in
today’s modern browsers.
The first part of this appendix lists the properties that were tested and their respective
values in Table D-1.
The second part examines eight form elements and how they can be modified using 20
of the CSS properties listed in Table D-1 in 10 different browsers:
ã Checkboxes, are shown in Table D-2 and Figures D-1 to D-20.
ã File Upload, is shown in Table D-3 and Figures D-21 to D-40.
ã Radio Buttons, are shown in Table D-4 and Figures D-41 to D-60.
ã Input Text, is shown in Table D-5 and Figures D-61 to D-80.
ã Select with Multiple Items, is shown in Table D-6 and Figures D-81 to D-100.
ã Select with Individual Item, is shown in Table D-7 and Figures D-101 to D-120.
ã Submit Button, is shown in Table D-8 and Figures D-121 to D-140.
ã Textarea, is shown in Table D-9 and Figures D-141 to D-160.
The values used from Table D-2 to Table D-9 include NA, Y, N, and S.
NA stands for Not Available meaning that the CSS property does not apply to the form
element, Y for Yes meaning that the CSS property’s value is properly applied, N for No
a meaning that the CSS property’s value was not applied and S for Somewhat meaning
that there is some part of the CSS property’s value being applied.
164 trang |
Chia sẻ: tlsuongmuoi | Lượt xem: 3267 | Lượt tải: 0
Bạn đang xem trước 20 trang tài liệu Styling of Form Elements, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
APPENDIX D
Styling of Form Elements
Forms have a big impact on our day-to-day Internet lifestyle, so designers want to
control the look-and-feel of form elements in their web page designs. The problem is
that browsers manipulate the visual display of form elements from one browser to the
next. Even the same browser version can display a form element differently on separate
operating systems.
To help web developers determine the best way to design web forms, this appendix
documents a majority of the visual CSS properties and their effect on form elements in
today’s modern browsers.
The first part of this appendix lists the properties that were tested and their respective
values in Table D-1.
The second part examines eight form elements and how they can be modified using 20
of the CSS properties listed in Table D-1 in 10 different browsers:
• Checkboxes, are shown in Table D-2 and Figures D-1 to D-20.
• File Upload, is shown in Table D-3 and Figures D-21 to D-40.
• Radio Buttons, are shown in Table D-4 and Figures D-41 to D-60.
• Input Text, is shown in Table D-5 and Figures D-61 to D-80.
• Select with Multiple Items, is shown in Table D-6 and Figures D-81 to D-100.
• Select with Individual Item, is shown in Table D-7 and Figures D-101 to D-120.
• Submit Button, is shown in Table D-8 and Figures D-121 to D-140.
• Textarea, is shown in Table D-9 and Figures D-141 to D-160.
The values used from Table D-2 to Table D-9 include NA, Y, N, and S.
NA stands for Not Available meaning that the CSS property does not apply to the form
element, Y for Yes meaning that the CSS property’s value is properly applied, N for No
a meaning that the CSS property’s value was not applied and S for Somewhat meaning
that there is some part of the CSS property’s value being applied.
477
The Somewhat value marks unusual situations. There are points within
the HTML and CSS specifications that do not define a certain behavior
and therefore determination of a CSS rule’s successful application be-
comes difficult.
For example, Firefox expands the width of the input field as well as the
space between letters when using the letter-spacing property.
In this instance, the discrepancy could be due to Firefox calculating the
default width of the input field on a certain number of characters where-
as the other browsers could be basing the width on a predetermined
value or an unadjusted number of characters at the font size of the input
field.
Table D-1. The properties and their values used in testing form elements
Property Value
background-color #ccff00;
background-image url(checkerboard_bkgd.gif);
border 0;
border-color 1px solid red;
border-style groove;
border-width 24px;
color #00ccff;
font-family Georgia, Times, 'Times New Roman', serif;
font-size 24px;
font-weight bold;
height 100px;
letter-spacing 24px;
line-height 1.5;
margin 24px;
padding 24px;
text-align right;
text-decoration underline;
text-indent 24px;
width 100px;
word-spacing 24px;
478 | Appendix D: Styling of Form Elements
Checkboxes
background-color
Figure D-1. Testing the background color of checkboxes
Checkboxes | 479
background-image
Figure D-2. Testing background images in checkboxes
480 | Appendix D: Styling of Form Elements
border: 0;
Figure D-3. Testing the removal of borders on checkboxes
border: 0; | 481
border-color
Figure D-4. Testing of colors on the checkbox borders
482 | Appendix D: Styling of Form Elements
border-style
Figure D-5. Testing the styles of borders on checkboxes
border-style | 483
border-width
Figure D-6. Testing the widths of borders on checkboxes
484 | Appendix D: Styling of Form Elements
color
Figure D-7. Testing the color on checkboxes
color | 485
font-family
Figure D-8. Testing to set a different font on checkboxes
486 | Appendix D: Styling of Form Elements
font-size
Figure D-9. Testing a different size of font on checkboxes
font-size | 487
font-weight
Figure D-10. Testing a bold font on checkboxes
488 | Appendix D: Styling of Form Elements
height
Figure D-11. Testing to set a height for checkboxes
height | 489
letter-spacing
Figure D-12. Testing the letter spacing of checkboxes
490 | Appendix D: Styling of Form Elements
line-height
Figure D-13. Testing setting the spacing between lines of text on checkboxes
line-height | 491
margin
Figure D-14. Testing margins on checkboxes
492 | Appendix D: Styling of Form Elements
padding
Figure D-15. Testing padding on checkboxes
padding | 493
text-align
Figure D-16. Testing the alignment of text
494 | Appendix D: Styling of Form Elements
text-decoration
Figure D-17. Testing to set a different font on checkboxes
text-decoration | 495
text-indent
Figure D-18. Testing indenting the text on checkboxes
496 | Appendix D: Styling of Form Elements
width
Figure D-19. Testing the width of checkboxes
width | 497
word-spacing
Figure D-20. Testing the spacing between words on checkboxes
498 | Appendix D: Styling of Form Elements
T
ab
le
D
-2
. A
r
ev
ie
w
o
f t
he
C
SS
p
ro
pe
rt
ie
s
on
c
he
ck
bo
xe
s
W
in
IE
5
W
in
IE
5.
5
W
in
IE
6
W
in
IE
7
Sa
fa
ri2
W
in
FF
1.
5
M
ac
FF
1.
5
W
in
NN
7.
2
M
ac
NN
7.
2
Op
8.
5
ba
ck
gr
ou
nd
-c
ol
or
S
S
S
S
N
N
N
N
N
Y
ba
ck
gr
ou
nd
-i
ma
ge
S
S
S
S
N
N
N
N
N
Y
bo
rd
er
N
N
N
N
N
N
N
N
N
N
bo
rd
er
-c
ol
or
S
S
S
S
N
N
N
N
N
Y
bo
rd
er
-s
ty
le
S
S
S
S
N
N
N
N
N
Y
bo
rd
er
-w
id
th
N
N
N
N
N
N
N
N
N
N
co
lo
r
N
N
N
N
N
N
N
N
N
N
fo
nt
-f
am
il
y
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
fo
nt
-s
iz
e
N
N
N
N
N
N
N
N
N
N
fo
nt
-w
ei
gh
t
N
N
N
N
N
N
N
N
N
N
he
ig
ht
S
S
S
N
N
S
Y
S
Y
N
le
tt
er
-s
pa
ci
ng
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
li
ne
-h
ei
gh
t
N
N
N
N
N
N
N
N
N
N
ma
rg
in
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
pa
dd
in
g
N
N
N
N
N
N
N
N
N
Y
te
xt
-a
li
gn
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
te
xt
-d
ec
or
at
io
n
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
te
xt
-i
nd
en
t
Y
Y
Y
S
N
N
N
N
N
N
wi
dt
h
S
S
S
S
S
S
Y
S
Y
S
wo
rd
-s
pa
ci
ng
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
word-spacing | 499
File Input
background-color
Figure D-21. Testing the background color of file input
500 | Appendix D: Styling of Form Elements
background-image
Figure D-22. Testing background images in file input
background-image | 501
border: 0;
Figure D-23. Testing the removal of borders on file input
502 | Appendix D: Styling of Form Elements
border-color
Figure D-24. Testing of colors on the file input borders
border-color | 503
border-style
Figure D-25. Testing the styles of borders on file input
504 | Appendix D: Styling of Form Elements
border-widht
Figure D-26. Testing the widths of borders on file input
border-widht | 505
color
Figure D-27. Testing the color on file input
506 | Appendix D: Styling of Form Elements
font-family
Figure D-28. Testing to set a different font on file input
font-size
Figure D-29. Testing a different size of font on file input
font-family | 507
font-weight
Figure D-30. Testing a bold font on file input
508 | Appendix D: Styling of Form Elements
height
Figure D-31. Testing to set a height for file inputlet
height | 509
letter-spacing
Figure D-32. Testing the letter spacing of file input
line-height
Figure D-33. Testing setting the spacing between lines of text on file input
510 | Appendix D: Styling of Form Elements
margin
Figure D-34. Testing margins on file input
margin | 511
padding
Figure D-35. Testing padding on file input
512 | Appendix D: Styling of Form Elements
text-align
Figure D-36. Testing the alignment of text on file input
text-decoration
Figure D-37. Testing to set a different font on file input
text-align | 513
text-indent
Figure D-38. Testing indenting the text on file input
514 | Appendix D: Styling of Form Elements
width
Figure D-39. Testing the width of file input
width | 515
word-spacing
Figure D-40. Testing the spacing between words on file input
516 | Appendix D: Styling of Form Elements
T
ab
le
D
-3
. A
r
ev
ie
w
o
f t
he
C
SS
p
ro
pe
rt
ie
s
on
fi
le
u
pl
oa
d
W
in
IE
5
W
in
IE
5.
5
W
in
IE
6
W
in
IE
7
Sa
fa
ri2
W
in
FF
1.
5
M
ac
FF
1.
5
W
in
NN
7.
2
M
ac
NN
7.
2
Op
8.
5
ba
ck
gr
ou
nd
-c
ol
or
Y
Y
Y
Y
N
Y
Y
Y
Y
N
ba
ck
gr
ou
nd
-i
ma
ge
Y
Y
Y
Y
N
N
N
N
N
N
bo
rd
er
Y
S
Y
Y
N
N
N
N
N
N
bo
rd
er
-c
ol
or
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
bo
rd
er
-s
ty
le
Y
Y
Y
Y
N
N
N
N
N
Y
bo
rd
er
-w
id
th
Y
Y
Y
Y
N
N
N
N
N
S
co
lo
r
N
N
N
N
N
N
N
N
N
N
fo
nt
-f
am
il
y
N
N
N
N
N
N
N
N
N
Y
fo
nt
-s
iz
e
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
fo
nt
-w
ei
gh
t
N
N
N
N
N
N
N
N
N
Y
he
ig
ht
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
le
tt
er
-s
pa
ci
ng
N
N
N
N
N
N
S
N
N
N
li
ne
-h
ei
gh
t
N
N
N
N
N
N
N
N
N
N
ma
rg
in
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
pa
dd
in
g
Y
Y
Y
Y
N
N
N
N
N
Y
te
xt
-a
li
gn
N
N
N
N
N
S
S
S
S
N
te
xt
-d
ec
or
at
io
n
N
N
N
N
N
N
N
N
N
N
te
xt
-i
nd
en
t
Y
Y
Y
Y
N
Y
Y
Y
Y
N
wi
dt
h
Y
Y
Y
Y
Y
S
S
S
S
Y
wo
rd
-s
pa
ci
ng
N
N
N
N
N
N
S
N
S
N
word-spacing | 517
Radio Buttons
background-color
Figure D-41. Testing the background color of radio buttons
518 | Appendix D: Styling of Form Elements
background-image
Figure D-42. Testing background images in radio buttons
background-image | 519
border: 0;
Figure D-43. Testing the removal of borders on radio buttons
520 | Appendix D: Styling of Form Elements
border-color
Figure D-44. Testing of colors on the radio button borders
border-color | 521
border-style
Figure D-45. Testing the styles of borders on radio buttons
522 | Appendix D: Styling of Form Elements
border-width
Figure D-46. Testing the widths of borders on radio buttons
border-width | 523
color
Figure D-47. Testing the color on radio buttons
524 | Appendix D: Styling of Form Elements
font-family
Figure D-48. Testing to set a different font on radio buttons
font-family | 525
font-size
Figure D-49. Testing a different size of font on radio buttons
526 | Appendix D: Styling of Form Elements
font-weight
Figure D-50. Testing a bold font on radio buttons
font-weight | 527
height
Figure D-51. Testing to set a height for radio buttons
528 | Appendix D: Styling of Form Elements
letter-spacing
Figure D-52. Testing the letter spacing of radio buttons
letter-spacing | 529
line-height
Figure D-53. Testing setting the spacing between lines of text on radio buttons
530 | Appendix D: Styling of Form Elements
margin
Figure D-54. Testing margins on radio buttons
margin | 531
padding
Figure D-55. Testing padding on radio buttons
532 | Appendix D: Styling of Form Elements
text-align
Figure D-56. Testing the alignment of text on radio buttons
text-align | 533
text-decoration
Figure D-57. Testing to set a different font on radio buttons
534 | Appendix D: Styling of Form Elements
text-indent
Figure D-58. Testing indenting the text on radio buttons
text-indent | 535
width
Figure D-59. Testing the width of radio buttons
536 | Appendix D: Styling of Form Elements
word-spacing
Figure D-60. Testing the spacing between words on radio buttons
word-spacing | 537
T
ab
le
D
-4
. A
r
ev
ie
w
o
f t
he
C
SS
p
ro
pe
rt
ie
s
on
r
ad
io
b
ut
to
ns
W
in
IE
5
W
in
IE
5.
5
W
in
IE
6
W
in
IE
7
Sa
fa
ri2
W
in
FF
1.
5
M
ac
FF
1.
5
W
in
NN
7.
2
M
ac
NN
7.
2
Op
8.
5
ba
ck
gr
ou
nd
-c
ol
or
S
S
S
S
N
N
N
N
N
Y
ba
ck
gr
ou
nd
-im
ag
e
S
S
S
S
N
N
S
N
S
S
bo
rd
er
N
N
N
N
N
N
N
N
N
N
bo
rd
er
-c
ol
or
S
S
S
S
N
N
N
N
N
S
bo
rd
er
-s
ty
le
S
S
S
S
N
N
N
N
N
S
bo
rd
er
-w
id
th
N
N
N
N
N
N
N
N
N
N
co
lo
r
N
N
N
N
N
N
N
N
N
N
fo
nt
-fa
m
ily
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
fo
nt
-s
ize
N
N
N
N
N
N
N
N
N
N
fo
nt
-w
ei
gh
t
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
he
ig
ht
S
S
S
S
N
N
Y
S
Y
S
le
tte
r-s
pa
cin
g
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
lin
e-
he
ig
ht
N
N
N
N
N
N
N
N
N
N
m
ar
gi
n
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
pa
dd
in
g
N
N
N
N
N
N
N
N
N
S
te
xt
-a
lig
n
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
te
xt
-d
ec
or
at
io
n
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
te
xt
-in
de
nt
Y
Y
Y
S
N
N
N
N
N
N
w
id
th
S
S
S
S
S
N
Y
S
Y
S
w
or
d-
sp
ac
in
g
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
538 | Appendix D: Styling of Form Elements
Text Fields
background-color
Figure D-61. Testing the background color of text fields
Text Fields | 539
background-image
Figure D-62. Testing background images in text fields
540 | Appendix D: Styling of Form Elements
border: 0;
Figure D-63. Testing the removal of borders on text fields
border: 0; | 541
border-color
Figure D-64. Testing of colors on the text field borders
542 | Appendix D: Styling of Form Elements
border-style
Figure D-65. Testing the styles of borders on text fields
border-style | 543
border-width
Figure D-66. Testing the widths of borders on text fields
544 | Appendix D: Styling of Form Elements
color
Figure D-67. Testing the color on text fields
color | 545
font-family
Figure D-68. Testing to set a different font on text fields
546 | Appendix D: Styling of Form Elements
font-size
Figure D-69. Testing a different size of font on text fields
font-size | 547
font-weight
Figure D-70. Testing a bold font on text fields
548 | Appendix D: Styling of Form Elements
height
Figure D-71. Testing to set a height for text fields
height | 549
letter-spacing
Figure D-72. Testing the letter spacing of text fields
line-height
Figure D-73. Testing setting the spacing between lines of text on text fields
550 | Appendix D: Styling of Form Elements
margin
Figure D-74. Testing margins on text fields
margin | 551
padding
Figure D-75. Testing padding on text fields
552 | Appendix D: Styling of Form Elements
text-align
Figure D-76. Testing the alignment of text on text fields
text-align | 553
text-decoration
Figure D-77. Testing to set a different font on text fields
554 | Appendix D: Styling of Form Elements
text-indent
Figure D-78. Testing indenting the text on text fields
text-indent | 555
width
Figure D-79. Testing the width of text fields
556 | Appendix D: Styling of Form Elements
word-spacing
Figure D-80. Testing the spacing between words on text fields
word-spacing | 557
T
ab
le
D
-5
. A
r
ev
ie
w
o
f t
he
C
SS
p
ro
pe
rt
ie
s
on
te
xt
fi
el
ds
W
in
IE
5
W
in
IE
5.
5
W
in
IE
6
W
in
IE
7
Sa
fa
ri2
W
in
FF
1.
5
M
ac
FF
1.
5
W
in
NN
7.
2
M
ac
NN
7.
2
Op
8.
5
ba
ck
gr
ou
nd
-c
ol
or
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
ba
ck
gr
ou
nd
-i
ma
ge
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
bo
rd
er
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
bo
rd
er
-c
ol
or
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
bo
rd
er
-s
ty
le
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
bo
rd
er
-w
id
th
Y
Y
Y
Y
N
Y
Y
Y
Y
N
co
lo
r
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
fo
nt
-f
am
il
y
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
fo
nt
-s
iz
e
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
fo
nt
-w
ei
gh
t
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
he
ig
ht
Y
Y
Y
Y
N
Y
Y
Y
Y
S
le
tt
er
-s
pa
ci
ng
Y
Y
Y
Y
N
S
S
Y
Y
Y
li
ne
-h
ei
gh
t
N
N
N
N
N
N
N
N
N
N
ma
rg
in
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
pa
dd
in
g
Y
S
Y
Y
N
Y
Y
Y
Y
S
te
xt
-a
li
gn
N
N
N
N
N
N
N
N
N
N
te
xt
-d
ec
or
at
io
n
Y
Y
Y
Y
N
Y
Y
Y
Y
N
te
xt
-i
nd
en
t
S
S
S
S
N
Y
Y
Y
Y
N
wi
dt
h
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
wo
rd
-s
pa
ci
ng
N
N
Y
Y
N
Y
Y
Y
Y
N
558 | Appendix D: Styling of Form Elements
Multiple Options
background-color
Figure D-81. Testing the background color of select element with multiple options
Multiple Options | 559
background-image
Figure D-82. Testing background images in select element with multiple options
560 | Appendix D: Styling of Form Elements
border: 0;
Figure D-83. Testing the removal of borders on select element with multiple options
border: 0; | 561
border-color
Figure D-84. Testing of border colors on select element with multiple options
562 | Appendix D: Styling of Form Elements
border-style
Figure D-85. Testing the styles of borders on select element with multiple options
border-style | 563
border-width
Figure D-86. Testing the widths of borders on select element with multiple options
564 | Appendix D: Styling of Form Elements
color
Figure D-87. Testing the color on select element with multiple options
color | 565
font-family
Figure D-88. Testing to set a different font on select element with multiple options
566 | Appendix D: Styling of Form Elements
font-size
Figure D-89. Testing a different size of font on select element with multiple options
font-size | 567
font-weight
Figure D-90. Testing a bold font on select element with multiple options
568 | Appendix D: Styling of Form Elements
height
Figure D-91. Testing to set a height for select element with multiple options
height | 569
letter-spacing
Figure D-92. Testing the letter spacing of select element with multiple options
570 | Appendix D: Styling of Form Elements
line-height
Figure D-93. Testing setting the spacing between lines of text on select element with multiple options
line-height | 571
margin
Figure D-94. Testing margins on select element with multiple options
572 | Appendix D: Styling of Form Elements
padding
Figure D-95. Testing padding on select element with multiple options
padding | 573
text-align
Figure D-96. Testing the alignment of text on select element with multiple options
574 | Appendix D: Styling of Form Elements
text-decoration
Figure D-97. Testing to set a different font on select element with multiple options
text-decoration | 575
text-indent
Figure D-98. Testing indenting the text on select element with multiple options
576 | Appendix D: Styling of Form Elements
width
Figure D-99. Testing the width of select element with multiple options
width | 577
word-spacing
Figure D-100. Testing the spacing between words on select element with multiple options
578 | Appendix D: Styling of Form Elements
T
ab
le
D
-6
. A
r
ev
ie
w
o
f t
he
C
SS
p
ro
pe
rt
ie
s
on
s
el
ec
t e
le
m
en
t w
it
h
m
ul
ti
pl
e
op
ti
on
s
sh
ow
in
g
W
in
IE
5
W
in
IE
5.
5
W
in
IE
6
W
in
IE
7
Sa
fa
ri2
W
in
FF
1.
5
M
ac
FF
1.
5
W
in
NN
7.
2
M
ac
NN
7.
2
Op
8.
5
ba
ck
gr
ou
nd
-c
ol
or
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
ba
ck
gr
ou
nd
-i
ma
ge
N
N
N
N
N
Y
Y
Y
Y
N
bo
rd
er
N
N
N
N
N
Y
Y
N
N
Y
bo
rd
er
-c
ol
or
N
N
N
N
N
Y
Y
N
S
Y
bo
rd
er
-s
ty
le
N
N
N
N
N
Y
Y
N
N
Y
bo
rd
er
-w
id
th
N
N
N
N
N
Y
Y
N
N
N
co
lo
r
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
fo
nt
-f
am
il
y
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
fo
nt
-s
iz
e
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
fo
nt
-w
ei
gh
t
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
he
ig
ht
S
S
S
S
Y
Y
Y
Y
Y
Y
le
tt
er
-s
pa
ci
ng
N
N
N
N
N
S
S
S
S
S
li
ne
-h
ei
gh
t
N
N
N
N
N
N
N
N
N
N
ma
rg
in
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
pa
dd
in
g
N
N
N
N
N
Y
Y
Y
Y
N
te
xt
-a
li
gn
N
N
N
N
N
Y
Y
Y
Y
Y
te
xt
-d
ec
or
at
io
n
Y
Y
Y
N
N
N
N
N
N
te
xt
-i
nd
en
t
S
S
S
S
N
N
N
N
N
N
wi
dt
h
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
wo
rd
-s
pa
ci
ng
N
N
N
N
N
S
S
S
S
N
word-spacing | 579
Select Element
background-color
Figure D-101. Testing the background color of select element
580 | Appendix D: Styling of Form Elements
background-image
Figure D-102. Testing background images in select element
background-image | 581
border: 0;
Figure D-103. Testing the removal of borders on select element
582 | Appendix D: Styling of Form Elements
border-color
Figure D-104. Testing of colors on the select element borders
border-color | 583
border-style
Figure D-105. Testing the styles of borders on select element
584 | Appendix D: Styling of Form Elements
border-width
Figure D-106. Testing the widths of borders on select element
border-width | 585
color
Figure D-107. Testing the color on select element
586 | Appendix D: Styling of Form Elements
font-family
Figure D-108. Testing to set a different font on select element
font-family | 587
font-size
Figure D-109. Testing a different size of font on select element
588 | Appendix D: Styling of Form Elements
font-weight
Figure D-110. Testing a bold font on select element
font-weight | 589
height
Figure D-111. Testing to set a height for select element
590 | Appendix D: Styling of Form Elements
letter-spacing
Figure D-112. Testing the letter spacing of select element
line-height
Figure D-113. Testing setting the spacing between lines of text on select element
letter-spacing | 591
margin
Figure D-114. Testing margins on select element
592 | Appendix D: Styling of Form Elements
padding
Figure D-115. Testing padding on select element
padding | 593
text-align
Figure D-116. Testing the alignment of text on select element
594 | Appendix D: Styling of Form Elements
text-decoration
Figure D-117. Testing to set a different font on select element
text-decoration | 595
text-indent
Figure D-118. Testing indenting the text on select element
596 | Appendix D: Styling of Form Elements
width
Figure D-119. Testing the width of select element
width | 597
word-spacing
Figure D-120. Testing the spacing between words on select element
598 | Appendix D: Styling of Form Elements
T
ab
le
D
-7
. A
r
ev
ie
w
o
f t
he
C
SS
p
ro
pe
rt
ie
s
on
s
el
ec
t e
le
m
en
t w
it
h
on
e
op
ti
on
s
ho
w
in
g
W
in
IE
5
W
in
IE
5.
5
W
in
IE
6
W
in
IE
7
Sa
fa
ri2
W
in
FF
1.
5
M
ac
FF
1.
5
W
in
NN
7.
2
M
ac
NN
7.
2
Op
8.
5
ba
ck
gr
ou
nd
-c
ol
or
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
ba
ck
gr
ou
nd
-i
ma
ge
N
N
N
N
N
N
N
N
N
N
bo
rd
er
N
N
N
N
N
Y
Y
N
N
Y
bo
rd
er
-c
ol
or
N
N
N
N
N
Y
Y
N
S
Y
bo
rd
er
-s
ty
le
N
N
N
N
N
Y
Y
N
N
Y
bo
rd
er
-w
id
th
N
N
N
N
N
Y
Y
N
N
N
co
lo
r
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
fo
nt
-f
am
il
y
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
fo
nt
-s
iz
e
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
fo
nt
-w
ei
gh
t
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
he
ig
ht
N
N
N
N
N
S
S
S
S
Y
le
tt
er
-s
pa
ci
ng
N
N
N
N
N
Y
Y
Y
Y
Y
li
ne
-h
ei
gh
t
N
N
N
N
N
N
N
N
N
N
ma
rg
in
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
pa
dd
in
g
N
N
N
N
N
Y
Y
Y
Y
N
te
xt
-a
li
gn
N
N
N
N
N
Y
Y
Y
Y
N
te
xt
-d
ec
or
at
io
n
Y
Y
Y
Y
N
N
N
N
N
N
te
xt
-i
nd
en
t
S
S
S
S
N
Y
Y
Y
Y
N
wi
dt
h
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
wo
rd
-s
pa
ci
ng
N
N
N
N
N
Y
Y
Y
Y
Y
word-spacing | 599
Submit Button
background-color
Figure D-121. Testing the background color of select element
600 | Appendix D: Styling of Form Elements
background-image
Figure D-122. Testing background images in the submit button
background-image | 601
border: 0;
Figure D-132. Testing the removal of borders on the submit button
602 | Appendix D: Styling of Form Elements
border-color
Figure D-124. Testing of colors on the submit button borders
border-color | 603
border-style
Figure D-125. Testing the styles of borders on the submit button
604 | Appendix D: Styling of Form Elements
border-width
Figure D-126. Testing the widths of borders on the submit button
border-width | 605
color
Figure D-127. Testing the color on the submit button
606 | Appendix D: Styling of Form Elements
font-family
Figure D-128. Testing to set a different font on the submit button
font-family | 607
font-size
Figure D-129. Testing a different size of font on the submit button
608 | Appendix D: Styling of Form Elements
font-weight
Figure D-130. Testing a bold font on the submit button
font-weight | 609
height
Figure D-131. Testing to set a height for the submit button
610 | Appendix D: Styling of Form Elements
letter-spacing
Figure D-132. Testing the letter spacing of the submit button
line-height
Figure D-133. Testing setting the spacing between lines of text on the submit button
letter-spacing | 611
margin
Figure D-134. Testing margins on the submit button
612 | Appendix D: Styling of Form Elements
padding
Figure D-135. Testing padding on the submit button
padding | 613
text-align
Figure D-136. Testing the alignment of text on the submit button
614 | Appendix D: Styling of Form Elements
text-decoration
Figure D-137. Testing to set a different font on the submit button
text-decoration | 615
text-indent
Figure D-138. Testing indenting the text on the submit button
616 | Appendix D: Styling of Form Elements
width
Figure D-139. Testing the width of the submit button
width | 617
word-spacing
Figure D-140. Testing the spacing between words on the submit button
618 | Appendix D: Styling of Form Elements
T
ab
le
D
-8
. A
r
ev
ie
w
o
f t
he
C
SS
p
ro
pe
rt
ie
s
on
th
e
su
bm
it
b
ut
to
n
W
in
IE
5
W
in
IE
5.
5
W
in
IE
6
W
in
IE
7
Sa
fa
ri2
W
in
FF
1.
5
M
ac
FF
1.
5
W
in
NN
7.
2
M
ac
NN
7.
2
Op
8.
5
ba
ck
gr
ou
nd
-c
ol
or
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
ba
ck
gr
ou
nd
-i
ma
ge
Y
Y
N
N
N
Y
Y
Y
Y
Y
bo
rd
er
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
bo
rd
er
-c
ol
or
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
bo
rd
er
-s
ty
le
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
bo
rd
er
-w
id
th
Y
Y
Y
Y
N
Y
Y
Y
Y
N
co
lo
r
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
fo
nt
-f
am
il
y
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
fo
nt
-s
iz
e
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
fo
nt
-w
ei
gh
t
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
he
ig
ht
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
le
tt
er
-s
pa
ci
ng
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
li
ne
-h
ei
gh
t
N
N
N
N
N
N
N
N
N
N
ma
rg
in
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
pa
dd
in
g
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
te
xt
-a
li
gn
N
N
Y
Y
N
N
N
N
N
Y
te
xt
-d
ec
or
at
io
n
Y
Y
Y
Y
N
N
N
N
N
N
te
xt
-i
nd
en
t
S
S
S
S
N
Y
Y
Y
Y
N
wi
dt
h
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
wo
rd
-s
pa
ci
ng
N
N
Y
Y
N
Y
Y
Y
Y
N
word-spacing | 619
Textarea Element
background-color
Figure D-141. Testing the background color of the textarea element
620 | Appendix D: Styling of Form Elements
background-image
Figure D-142. Testing background images in the textarea element
background-image | 621
border: 0;
Figure D-143. Testing the removal of borders on the textarea element
622 | Appendix D: Styling of Form Elements
border-color
Figure D-144. Testing of colors on the textarea element borders
border-color | 623
border-style
Figure D-145. Testing the styles of borders on the textarea elementborde
624 | Appendix D: Styling of Form Elements
border-width
Figure D-146. Testing the widths of borders on the textarea element
border-width | 625
color
Figure D-147. Testing the color on the textarea element
626 | Appendix D: Styling of Form Elements
font-family
Figure D-148. Testing to set a different font on the textarea element
font-family | 627
font-size
Figure D-149. Testing a different size of font on the textarea element
628 | Appendix D: Styling of Form Elements
font-weight
Figure D-150. Testing a bold font on the textarea element
font-weight | 629
height
Figure D-151. Testing to set a height for the textarea element
630 | Appendix D: Styling of Form Elements
letter-spacing
Figure D-152. Testing the letter spacing of the textarea element
letter-spacing | 631
line-height
Figure D-153. Testing setting the spacing between lines of text on the textarea element
632 | Appendix D: Styling of Form Elements
margin
Figure D-154. Testing margins on the textarea element
margin | 633
padding
Figure D-155. Testing padding on the textarea element
634 | Appendix D: Styling of Form Elements
text-alignt
Figure D-156. Testing the alignment of text on the textarea element
text-alignt | 635
text-decoration
Figure D-157. Testing to set a different font on the textarea element
636 | Appendix D: Styling of Form Elements
text-indent
Figure D-158. Testing indenting the text on the textarea element
text-indent | 637
width
Figure D-159. Testing the width of the textarea element
638 | Appendix D: Styling of Form Elements
word-spacing
Figure D-160. Testing the spacing between words on the textarea element
word-spacing | 639
T
ab
le
D
-9
. A
r
ev
ie
w
o
f t
he
C
SS
p
ro
pe
rt
ie
s
on
te
xt
ar
ea
W
in
IE
5
W
in
IE
5.
5
W
in
IE
6
W
in
IE
7
Sa
fa
ri2
W
in
FF
1.
5
M
ac
FF
1.
5
W
in
NN
7.
2
M
ac
NN
7.
2
Op
8.
5
ba
ck
gr
ou
nd
-c
ol
or
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
ba
ck
gr
ou
nd
-i
ma
ge
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
bo
rd
er
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
bo
rd
er
-c
ol
or
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
bo
rd
er
-s
ty
le
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
bo
rd
er
-w
id
th
Y
Y
Y
Y
N
Y
Y
Y
Y
N
co
lo
r
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
fo
nt
-f
am
il
y
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
fo
nt
-s
iz
e
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
fo
nt
-w
ei
gh
t
Y
Y
Y
N
Y
Y
Y
Y
Y
Y
he
ig
ht
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
le
tt
er
-s
pa
ci
ng
Y
Y
Y
Y
N
S
S
Y
Y
Y
li
ne
-h
ei
gh
t
Y
Y
Y
Y
N
Y
Y
N
N
N
ma
rg
in
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
pa
dd
in
g
Y
Y
Y
S
N
S
S
S
S
S
te
xt
-a
li
gn
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
te
xt
-d
ec
or
at
io
n
Y
Y
Y
Y
N
Y
Y
Y
Y
N
te
xt
-i
nd
en
t
S
S
S
S
N
Y
Y
Y
Y
N
wi
dt
h
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
wo
rd
-s
pa
ci
ng
N
N
Y
Y
N
Y
Y
Y
Y
N
640 | Appendix D: Styling of Form Elements
Các file đính kèm theo tài liệu này:
- appd.pdf