没有合适的资源?快使用搜索试试~ 我知道了~
CSS CookBook 最经典的教程
资源详情
资源评论
资源推荐
APPENDIX E
Styling of Form Elements
With the impact that forms have on our day-to-day Internet commerce and lifestyle,
forms are always in the foreground of website design.
Web designers want to control the look and feel of form elements in their web page
design so that they are more appealing to their audience and also fit in with the rest of
the design.
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 differ-
ently on separate operating systems.
This appendix covers how browsers don’t render form controls consistently. Since there
are about 10 browsers and 20 CSS properties reviewed, as well as 8 HTML form ele-
ments, the entire appendix is too large to print. So, we took it to the Internet and made
it available online for free. If you’re viewing this appendix as a standalone piece online,
you can access the full book here: http://oreilly.com/catalog/9780596155933/.
Anatomy of the Appendix
The first part of this appendix lists the properties and their respective values that were
tested (as shown in Table E-1).
The second part examines eight form elements and how they can be modified using 20
CSS properties (listed in Table E-1) in 10 different browsers:
• Checkboxes, as shown in Table E-2 and Figure E-1 to Figure E-20
• File upload, as shown in Table E-3 and Figure E-21 to Figure E-40
• Radio buttons, as shown in Table E-4 and Figure E-41 to Figure E-60
• Input text, as shown in Table E-5 and Figure E-61 to Figure E-80
• Select with multiple items, as shown in Table E-6 and Figure E-81 to Figure E-100
• Select with an individual item, as shown in Table E-7 and Figure E-101 to Fig-
ure E-120
677
• Submit button, as shown in Table E-8 and Figure E-121 to Figure E-140
• Textarea, as shown in Table E-9 and Figure E-141 to Figure E-160
The values used in Tables E-2 to E-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 (meaning that the CSS property’s value was not applied), and S for Somewhat
(meaning that some part of the CSS property’s value is being applied).
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,
whereas the other browsers could be basing the width on a predeter-
mined value or an unadjusted number of characters at the font size of
the input field.
Tested CSS Properties
Table E-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;
678 | Appendix E: Styling of Form Elements
Property Value
padding 24px;
text-align right;
text-decoration underline;
text-indent 24px;
width 100px;
word-spacing 24px;
Input Element for Checkboxes
A checkbox element is a form element, which allows on/off selections for one or mul-
tiple items for a grouping. An example of a checkbox is one that lets you select which
ingredients you would like on a pizza.
Tested CSS Properties | 679
Table E-2. A review of the CSS properties on checkboxes
WinIE6 WinIE7 WinIE8b2 Chrome MacFF3 WinFF3 MacOP9 WinOP9 MacSF3 WinSF3 MacSF4b WinSF4b
background-color S S S N N N Y Y N N N N
background-image S S S N N N Y Y N N N N
border N N N N N N N N N N N N
border-color S S S N N N S S N N N N
border-style S S S N N N Y Y N N N N
border-width N N N N N N N N N N N N
color N N N N N N N N N N N N
font-family NA NA NA NA NA NA NA NA NA NA NA NA
font-size N N N N N N N N N N N N
font-weight N N N N N N N N N N N N
height S S S S N S S S S S S S
letter-spacing NA NA NA NA NA NA NA NA NA NA NA NA
line-height N N N N N N N N N N N N
margin Y Y Y Y Y Y Y Y Y Y Y Y
padding N N Y N N N Y Y N N N N
text-align NA NA NA NA NA NA NA NA NA NA NA NA
text-decoration NA NA NA NA NA NA NA NA NA NA NA NA
text-indent Y S N N N N N N N N N N
width S S S S N S S S S S S S
word-spacing
NA NA NA NA NA NA NA NA NA NA NA NA
680 | Appendix E: Styling of Form Elements
background-color
Figure E-1. Testing the background color of checkboxes
Tested CSS Properties | 681
剩余167页未读,继续阅读
javaspark2012
- 粉丝: 0
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0