分享一款基于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. jQuery调用ajax获取json格式数据

    <body> <div>点击按钮获取音乐列表</div> <input type="button" id="button&quo ...

  2. Mapper 与 Reducer 解析

    1 . 旧版 API 的 Mapper/Reducer 解析 Mapper/Reducer 中封装了应用程序的数据处理逻辑.为了简化接口,MapReduce 要求所有存储在底层分布式文件系统上的数据均 ...

  3. Linux专家心目中的最佳Linux发行版有哪些?

    坦率地说,我对Linux桌面的关注程度多于对Linux发行版的关注.在我看来,桌面环境是创新不断的领域.我认为,如果某个发行版呼吁关注自己,可能哪里出了岔子.不过,有一些Linux发行版还是我青睐的. ...

  4. 【性能测试】Linux性能监控命令——sar详解

    转载:https://blog.csdn.net/mig_davidli/article/details/52149993 sar命令可以从文件的读写情况.系统调用的使用情况.磁盘I/O.CPU效率. ...

  5. (剑指Offer)面试题48:不能被继承的类

    题目: 写一个不能被继承的类 思路: 1.把构造函数设为私有函数 在C++中子类的构造函数会自动调用父类的构造函数,子类的析构函数也会自动调用父类的构造函数,要想一个类不能被继承,只要把它的构造函数和 ...

  6. 异类的Javascript处理和解析URL的方式

    通常来说,我们使用Javascript处理和解析URL是使用location对象.在今天这个代码小技巧中,我们使用另外一个比较异类的方式处理和解析URL. 代码如下: function parseUR ...

  7. iOS arc和非arc 适用 宏

    iOS arc和非arc 适用 宏 1:使用宏 + (void)showAlertWithMessage:(NSString *)messages { dispatch_async(dispatch_ ...

  8. Could not find RubyGem cocoapods 错误

    之前安装过一次cocoapods 后来,安装octopress,安装过一次较新版的ruby,可能是由于ruby安装,把之前的cocoapods删除了,结果使用,出现如图错误 解决: 重新安装 coco ...

  9. Cleaner ITweenPath Source

    iTweenPath.cs [pyg language="csharp" s="monokai" ] //Slight additions for a clea ...

  10. laravel 安装环境安了三天!!

    各种报错,各种升级,各种重装,重启!! 记录一下一些错误吧,,, 错误太复杂,,,, 原因:版本问题!.CPU虚拟化问题.win10问题.软件兼容性问题.还有就是各种不细心啥的         分割线 ...