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. 运行Tomcat闪退问题，报的错误：Unsupported major.minor version 51.0

    在MyEclipse中运行tomcat,tomcat闪退并且报以下错误. java.lang.UnsupportedClassVersionError: org/apache/catalina/sta ...

  2. HDL之Bitwise operation

    1 Verilog 1.1 Bitwise operator Bitwise operators perform a bit wise operation on two operands. They ...

  3. js 读取外部的本地json文件

    Javascript 读取外部的本地json文件 方案1 运行本地web服务器,提供文件服务 方案2 1.data = '[{"name" : "Ashwin" ...

  4. 跳出语句 break continue

    break 使用场景:终止switch或者循环 在选择结构switch语句中 在循环语句中 离开使用场景的存在是没有意义的 public static void main(String[] args) ...

  5. python中if语句的使用

    1.对体重标准的判断 #coding:utf-8 height=170weight=65#weight=height-105if weight<height-105: print '您偏瘦!注意 ...

  6. python的jieba分词

    # 官方例程 # encoding=utf-8 import jieba seg_list = jieba.cut("我来到北京清华大学", cut_all=True) print ...

  7. 【深入理解Java虚拟机】自动内存管理机制——内存区域划分

      Java与C++之间有一堵有内存动态分配和垃圾收集技术所围成的"高墙",墙外面的人想进去,墙里面的人却想出来.C/C++程序员既拥有每一个对象的所有权,同时也担负着每一个对象生 ...

  8. [tyvj-1071]LCIS 动态规划

    LCIS模板 #include <cstdio> #include <cstring> #include <iostream> using namespace st ...

  9. C#常用 API函数大全

    常用Windows API1. API之网络函数WNetAddConnection 创建同一个网络资源的永久性连接WNetAddConnection2 创建同一个网络资源的连接WNetAddConne ...

  10. Ubuntu18.04 安装 oh-my-zsh

    目录 Ubuntu18.04 安装 oh-my-zsh 目录 安装zsh 安装curl 安装oh-my-zsh 使用zsh替换bash 修改终端主题和配色 修改终端配置 隐藏用户和主机名 效果图 Ub ...