分享一款基于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. 超链接的禁用属性Disabled了解

    可以设置超链接的Disabled属性的true 和 false来确定超链接是不是能点击 例如: <a herf='http://www.baidu.com' onclick='return cl ...

  2. vue父组件异步传递prop到子组件echarts画图问题踩坑总结

    效果图: 大致思路:考虑到5张图都是折线图,所以准备用一个子组件承接echarts画图,然后父组件通过prop传递不同数据来展示不同的图 踩坑问题: 1.引入line子组件,画了5个元素,但是只显示一 ...

  3. struts2-core-2.0.14更新到2.3.15

    struts2-core-2.0.14更新到2.3.15 将低版本的struts2-core更新到最新版本2.3.15,更新jar包,有这个几个 1. struts2-core-2.0.14.jar ...

  4. Java经典23种设计模式之行为型模式(三)

    本文接着介绍11种行为型模式里的备忘录模式.观察者模式.状态模式. 一.备忘录模式 在不破坏封装性的前提下,捕获一个对象的内部状态.并在该对象之外保存这个状态.这样以后就能够将该对象恢复到原先保存的状 ...

  5. [Angular-Scaled web] 5. ui-router $stateParams for sharing information

    When using ui-route, we want to pass the information with the url. Example: angular.module('categori ...

  6. html 中几次方,平方米,立方米.

    m的n次方表示法:mn m<sup>n</sup> 10<sup>6</sup> m的n次方表示法:mn m<sub>n</sub&g ...

  7. Pureftp SSL/TLS配置

    一.准备 & 安装 启用 Pure-FTPd SSL/TLS 连接方式在安装时需要检查以下两项: 1.系统中是否已经安装了 openssl 和 openssl-devel 包? 2.在编译 P ...

  8. PHP与SQL数据库交互中文乱码怎么办

    1 PHP向数据库写入的时候发生乱码 如图所示,把校对放过去看看,是不是别的什么语言 点击修改把字符编码改为utf8_general_ci 2 PHP读取数据库到页面的时候发生乱码 如下图所示 即使在 ...

  9. java创建二叉树并实现非递归中序遍历二叉树

    java创建二叉树并递归遍历二叉树前面已有讲解:http://www.cnblogs.com/lixiaolun/p/4658659.html. 在此基础上添加了非递归中序遍历二叉树: 二叉树类的代码 ...

  10. Linux系统登录:本地登录与远程登录

    安装登录系统的位置可以将登录方式分为两种:本地登录和远程登录.本地登录可以使用图形界面和命令行模式(也称字符界面)两种方式:远程登录可以使用SSH.Telnent.VNC.SFTP 4种方式. 常见的 ...