Select选择框的华丽变身

开发 前端
HTML Form 表单里的各种组件,例如文本输入框,textarea,按钮等,都可以通过CSS或其它技术进行美化,让它们看起来很漂亮了,唯独下拉列表选项框(select box),不管你怎么做,它摆在那里总显得格格不入。

HTML Form 表单里的各种组件,例如文本输入框,textarea,按钮等,都可以通过CSS或其它技术进行美化,让它们看起来很漂亮了,唯独下拉列表选项框(select box),不管你怎么做,它摆在那里总显得格格不入。

不过这种情况可能是一去不复返了,如果你猜测是使用HTML5技术, 那就错了,在中国,使用IE6浏览器的人仍占绝大大多数,这种古老的浏览器是不认识HTML5的。

我现在推荐的是一款JavaScript插件,它有JQuery和Prototype两种版本,支持所有类型的浏览器。使用它后,你的页面上的select选择框会变的漂亮的让你大吃一惊,下面是使用前和使用后的对比效果图。

单选模式:

 

单选框 原始

 

 

单选框 美化后

 

多选模式:

 

多选框美化效果

 

更多的效果请访问这个插件的官方主页的中文翻译Chosen演示页面

具体的用法非常简单,你只需要在select是加入class=”chzn-select”属性就行了,然后调用 jquery: $(“.chzn-select”).chosen(),一切都搞定。

原文:http://www.aqee.net/chosen-select/

【编辑推荐】

  1. 19款云端Web开发工具推荐
  2. jQuery是如何工作的
  3. 7个优秀的JavaScript资源推荐
  4. 浅析淘宝数据魔方技术架构
  5. JavaScript入门之语言基础
责任编辑:陈贻新 来源: 外刊IT评论
相关推荐

2011-06-03 09:33:01

Windows 8

2016-02-23 11:55:07

曙光云计算

2012-01-09 16:43:13

点心通讯录

2014-07-21 14:52:58

无线锐捷

2018-04-27 11:10:14

数字性能广域网优化Riverbed

2013-09-24 17:54:33

搜索搜索转型

2014-07-22 16:05:48

PC图形工作站浪潮

2010-06-10 09:32:36

openSUSE使用

2023-03-10 07:46:55

Go开发Channelselect

2013-11-20 14:56:40

iOS 7.1优化

2011-07-12 13:21:34

2012-07-25 16:03:00

JavaScript

2010-07-08 14:28:38

2012-11-28 01:55:07

软件测试

2011-06-27 14:56:31

JavaScript

2011-04-28 10:55:17

上网本HP Mini 510

2013-03-06 09:58:39

开发方式软件开发程序员

2010-05-18 13:45:08

MySQL selec

2014-04-15 15:37:31

愤怒的小鸟信息泄露
点赞
收藏

51CTO技术栈公众号