分享一款基于jQuery select下拉框美化插件。该插件适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

  <table>
<tr>
<td>
<h2>
演示1</h2>
<select name="drop1" class="ui-select">
<option value="">structure empty</option>
<option value="1">structure 1</option>
<option value="2">structure 2</option>
<option value="3">structure 3</option>
<option selected value="4">structure 4</option>
<option value="5">structure 5</option>
<option value="6">structure 6</option>
<option value="7">structure 7</option>
<option value="8">structure 8</option>
<option value="9">structure 9</option>
<option value="10">structure 10</option>
<option value="11">structure 11</option>
</select>
</td>
<td>
<h2>
演示2</h2>
<select name="drop2" class="ui-select">
<option value="">structure empty</option>
<option value="1">structure 1</option>
<option value="2">structure 2</option>
<option value="3">structure 3</option>
</select>
</td>
<td>
<h2>
演示3</h2>
<select name="drop3" class="ui-select" disabled="disabled">
<option value="0">structure empty</option>
<option value="1">structure 1</option>
<option value="2">structure 2</option>
<option value="3">structure 3</option>
</select>
</td>
<td>
<input type="reset" value="Reset" />
<input type="submit" value="Send" />
</td>
</tr>
</table>
</form>
<form action="" method="get">
<table>
<tr>
<td>
<h2>
Select 演示</h2>
<select name="drop1" class="ui-select">
<option value="">structure empty</option>
<option value="1">structure 1</option>
<option value="2">structure 2</option>
<option value="3">structure 3</option>
<option selected value="4">structure 4</option>
<option value="5">structure 5</option>
<option value="6">structure 6</option>
<option value="7">structure 7</option>
<option value="8">structure 8</option>
<option value="9">structure 9</option>
<option value="10">structure 10</option>
<option value="11">structure 11</option>
</select>
</td>
<td>
<h2>
Select 演示</h2>
<select name="drop2" class="ui-select">
<option value="">structure empty</option>
<option value="1">structure 1</option>
<option value="2">structure 2</option>
<option value="3">structure 3</option>
</select>
</td>
<td>
<h2>
Select 关闭演示</h2>
<select name="drop3" class="ui-select" disabled="disabled">
<option value="0">structure empty</option>
<option value="1">structure 1</option>
<option value="2">structure 2</option>
<option value="3">structure 3</option>
</select>
</td>
<td>
<input type="reset" value="Reset" />
<input type="submit" value="Send" />
</td>
</tr>
</table>

via:http://www.w2bc.com/Article/23958

基于jQuery select下拉框美化插件的更多相关文章

  1. Jquery Select 下拉框处理

    $("#select").empty();//清空 $("#select").append($("<option/>").val ...

  2. select下拉框美化

      其实用下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可. select { /*Chrome和Firefox里面的边框是不一样的,所以复 ...

  3. 【Select2】带搜索框的下拉框美化插件

    1  引入js css 文件 <script src="js/jquery-1.11.1.min.js"></script> <script src= ...

  4. 一款基于jQuery的联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  5. jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  6. jQuery制作简洁的多级联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  7. 基于Bootstrap的下拉框插件bootstrap-select

    写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...

  8. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

  9. jquery 获取下拉框值与select text

    下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...

随机推荐

  1. ASP.Net生成静态HTML页

    动态网页开发技术中,为了降低网站维护的工作量,常常用到动态页面技术.目前因特网上流行的做法是将网站中需要经常更新的数据存放到数据库中,当客户端浏览器向服务器发出HTTP请求时,服务器通过执行.解释某个 ...

  2. Spring定时器XML配置

    spring-task.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&qu ...

  3. [HNOI2002]营业额统计 Splay tree入门题

    题目连接:http://www.lydsy.com/JudgeOnline/problem.php?id=1588 1588: [HNOI2002]营业额统计 Time Limit: 5 Sec   ...

  4. T-SQL 之 控制流语句

    控制流语句也称为流程控制语句,是和高级编程语言中的类似功能一致的,引入控制流语句将使T-SQL代码有顺序执行转变为按控制执行. 批处理:一个批处理段是由一个或者多个语句组成的一个批处理,之所以叫批处理 ...

  5. 本地计算机上的OracleOraDb11g_home2TNSListener服务启动又停止了。一些服务自动停止,如果他们没有什么可做的 .

    一.问题 本地计算机上的OracleOraDb10g_home1TNSListener 服务启动又停止了 二.问题描述 Oracle:本地计算机上的OracleOraDb10g_home1TNSLis ...

  6. Oracle 检索数据

    SELECT  *  |    {   [ DISTINCT  ]    column   |    expression   [   alias   ]  ,   ...    } FROM  ta ...

  7. 浅析JDK中ServiceLoader的源码

    前提 紧接着上一篇<通过源码浅析JDK中的资源加载>,ServiceLoader是SPI(Service Provider Interface)中的服务类加载的核心类,也就是,这篇文章先介 ...

  8. Linux中more和less命令用法(转)

    一.more命令 more功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 ...

  9. xUtils中用DbUtils,ViewUtils的用法

    一.有关xUtils的简介 xUtils 包含了很多实用的android工具.xUtils 最初源于Afinal框架,进行了大量重构,使得xUtils支持大文件上传,更全面的http请求协议支持(10 ...

  10. CDH quick start VM 中运行wordcount例子

    需要注意的事情: 1. 对于wordcount1.0 ,按照http://www.cloudera.com/content/cloudera/en/documentation/HadoopTutori ...