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

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

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

单选模式：

多选模式：

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

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

更多参考：http://www.oschina.net/news/20528/jquery-chosen-plugin

设置选中问题：

在使用jquery的chosen()方法前进行操作，然后再进行chosen的方法。这样就能解决自定义选中问题

更多参考：http://chevy.iteye.com/blog/2085989

Chosen：Select 选择框的华丽变身的更多相关文章

  1. Notes: select选择框

    HTML选择框通过select标签创建,该元素是HTMLSelectElement的实例,拥有以下属性和方法: selectedIndex:选中项的索引 options:选择框的所有选项 add:向选 ...

  2. 类似 select 选择框效果及美化

    网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果.所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下: 对于上图的箭头效果, ...

  3. Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决

    Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...

  4. select选择框在谷歌火狐和IE样式的不同

    select选择在不同浏览器不同的显示样式, 在IE中 虽然默认和谷歌一样,但是当点击时向下 按钮消失, 解决方法如下: select { /*Chrome和Firefox里面的边框是不一样的,所以复 ...

  5. AngularJS初始化Select选择框

    一.引入 之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能.由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就 ...

  6. select选择框实现跳转

    select选择框实现跳转 零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单 就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...

  7. iiview Select 选择框打勾选中的内容label和展示的不一致

    Select选择框里加入了OptionGroup.option ; 以及input输入框支持模糊搜索: 不一致的原因:缺少  :label-in-value="true";官方文档 ...

  8. AngularJS Select(选择框)

    AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-option 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和 ...

  9. 修改页面中显示出需要修改的数据(包括select选择框复显示)

    页面中需要用到某个对象时,在底层代码中赋值,然后页面用java代码进行获取调用 如下截图: select复显示:根据后台方法赋值选择框 ,并设置初始值 按钮及选择框的禁用(五种方法): 方法一: $( ...

随机推荐

  1. ubuntu下安装 nginx ＋ php ＋ memcached + mariadb

    一,apt-get 安装 1,安装nginx sudo apt-get install nginx 所有的配置文件都在/etc/nginx下,虚拟主机配置在/etc/nginx/sites-avail ...

  2. css3 y轴翻转效果

    这个小例子是hover的时候可一看到div沿着y轴转动一圈 思路:css写好动画transiton: all 1s; hover的时候给他一个状态transform:rotateY(180deg); ...

  3. js预览上传图片

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. <转>Socket编程——基础介绍

    最近系统的看了下unix网络编程的一些内容,对socket的理解有了进一步的加深,在看APUE的时候,那会儿看socket上面介绍的比较少,只是模糊的懂了如何去写一个简单的TCP服务端和客户端,对其中 ...

  5. idea中SVN的运用

    1.1.1 上传代码时可以指定忽略一些上传目录 1.1.2 设置项目上传的路径 1.1.3 解决上传路径中包含“svn”目录问题 上传 从 SVN 服务器中检出代码到工作空间

  6. Oracle下rman备份和还原到数据库任意一个时间点

    Rman备份为物理备份,启用rman备份必须开启数据库归档,开启归档后相当于给数据库加了一层双保险.Rman备份主要备份数据库的数据文件,控制文件,归档日志. RMAN 备份 一. 检查数据库是否启用 ...

  7. BZOJ 1264: [AHOI2006]基因匹配Match DP_树状数组_LCS转LIS

    由于有重复数字,我们以一个序列为基准,另一个序列以第一个序列每个数所在下标为这个序列每个数对应的值. 注意的是,拆值的时候按照在第一个序列中的位置从大到小排,强制只能选一个. 最后跑一边最长上升子序列 ...

  8. Nginx 支持websocket的配置

    Nginx 支持websocket的配置server { listen 80; server_name 域名; location / { proxy_pass http://127.0.0.1:808 ...

  9. IOS开发：使用lipo合并armv7,i386,armv7s库文件

    假设多个版本的lib分别是 libxxx.armv7.a , libxxx.armv7s.a, libxxx.i386.a我们的目标是 把他们合并成超级通用版的libxxx.a  打开命令行 Term ...

  10. HDU2035 - 人见人爱A^B

    求A^B的最后三位数表示的整数.  说明:A^B的含义是"A的B次方" Input 输入数据包含多个测试实例,每个实例占一行,由两个正整数A和B组成(1<=A,B<=1 ...