HTML表单美化自由定制技术
(http://www.inehe.com/webdesign/tech/biaodan-checkbox-radio-buttons-select-58.html)
HTML表单对象在不同浏览器渲染方式并不一致,多数无法通过CSS 控制外观的对象在有些浏览器中看上去十分丑陋,本文精选了一些对表单对象进行个性化定制的技术。
尽管一些对象,如 textbox 和 textarea 可以通过 CSS 在不同浏览器获得一致的外观,但多数HTML表单对象在不同浏览器渲染方式并不一致,无法通过CSS 控制外观的对象在有些浏览器中看上去十分丑陋,本文精选了一些对表单对象进行个性化定制的技术。
Checkbox ,Radio Buttons 相关
1.) FancyForm
FancyForm 是一个非常强大的 JavaScript 库,可以作为 checkbox 和 radio button 的替代品,能生成非常漂亮的 checkbox 和 radio button,并支持几乎所有浏览器,该 JavaScript 库需要 MooTools JavaScript 框架的支持。
![](http://www.inehe.com/UploadFiles/webdesign/2009/4/200904190455184824.gif)
2.) CRIR: Checkbox & Radio Input Replacement
这个 JavaScript 和 CSS 组合可以隐藏表单中的 checkbox 和 radio button,并允许你使用 CSS 对 checkbox 与 radio button 的设置式样模拟 checkbox 和 radio button。表单的功能不会改变,仍可以收集 checkbox 和 radio button 的数据值,checkbox 和 radio button 的标签会触发那些隐藏的对象。
![](http://www.inehe.com/UploadFiles/webdesign/2009/4/200904190455193627.gif)
3.) Ryan Fait’s Custom Checkboxes & Radio Buttons
这个 JavaScript 和 CSS 组合允许你使用自己的图片模拟 checkbox,radio button 以及 select 列表控件。这个很周到的 JavaScript 库还可以在浏览器禁用了 JavaScript 的时候,自动用回传统的表单控件。
![](http://www.inehe.com/UploadFiles/webdesign/2009/4/200904190455196325.gif)
4.) ARC - Adam’s Radio/Checkbox Customization
该脚本会对表单中的 checkbox 和 radio button 及其标签进行探测,一旦发现,就会使用基于 CSS 式样的图形标签替换这些控件。
![](http://www.inehe.com/UploadFiles/webdesign/2009/4/200904190455195023.gif)
5.) prettyCheckboxes
![](http://www.inehe.com/UploadFiles/webdesign/2009/4/200904190455194934.gif)
6.) jQuery checkbox
![](http://www.inehe.com/UploadFiles/webdesign/2009/4/200904190455190983.gif)
一些定制 checkbox 和 radion button 的文章
- Custom Radio Button Implement With jQuery
- slayeroffice Custom Checkbox Elements
- Customized Html Controls: Creating Custom Checkbox
- Styled Form Controls
- Fancy Checkboxes and Radio Buttons
- Inside Technique : Custom Checkboxes
选择和下拉框(Select / Dropdown Box)相关
1.) JavaScript Image Combobox (JavaScript 图形化 Combobox)
![](http://www.inehe.com/UploadFiles/webdesign/2009/4/200904190455195092.gif)
2.) jQuery Dropdown Check List
![](http://www.inehe.com/UploadFiles/webdesign/2009/4/200904190455193756.gif)
3.) Custom Select With Icons
![](http://www.inehe.com/UploadFiles/webdesign/2009/4/200904190455192306.gif)
4.) ComboBoxes Using MooTools
![](http://www.inehe.com/UploadFiles/webdesign/2009/4/200904190455194725.gif)
5.) Select Replacement
![](http://www.inehe.com/UploadFiles/webdesign/2009/4/200904190455193397.gif)
6.) 更多 select box 定制技术 (基于 JavaScript)
更多 Form 控件对象
1.) Custom Form Elements (CFE)
Custom Form Elements 集合了各种技术,增强 XHTML Web 表单控件对象,基于 javaScript 和 CSS 实现更漂亮的效果,提高易用性与可访问性。支持绝大多数主流浏览器。
![](http://www.inehe.com/UploadFiles/webdesign/2009/4/200904190455195418.gif)
Niceforms 是一个可以替代几乎所有 web 表单对象的 JavaScript 库。你可以使用默认的主题,甚至可以开发自己的主题。
![](http://www.inehe.com/UploadFiles/webdesign/2009/4/200904190455191698.gif)