基于jQuery select下拉框美化插件
分享一款基于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下拉框美化插件的更多相关文章
- Jquery Select 下拉框处理
$("#select").empty();//清空 $("#select").append($("<option/>").val ...
- select下拉框美化
其实用下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可. select { /*Chrome和Firefox里面的边框是不一样的,所以复 ...
- 【Select2】带搜索框的下拉框美化插件
1 引入js css 文件 <script src="js/jquery-1.11.1.min.js"></script> <script src= ...
- 一款基于jQuery的联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
- jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)
效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- jQuery制作简洁的多级联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
- 基于Bootstrap的下拉框插件bootstrap-select
写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...
- jquery取消选择select下拉框
有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...
- jquery 获取下拉框值与select text
下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...
随机推荐
- 修改SharePoint 2013中Search Topology时遇到的一些问题以及一些Tips
这次操作在笔者的场中涉及到5台服务器, CA, APP2, APP3, APP4, APP5. 原本只有CA运行着Search Service Applicaiton, 现在想让APP2-5运行这项服 ...
- 【实践】简洁大方的summernote 富文本编辑器插件的用发——小技巧
前面说到summernote 的上传,可是我要知道怎么获取内容呀,很简单调用一下函数便可: 获取内容: $("#user-work-content").summernote(&qu ...
- QPS、RT、PV、UV之间的关系
QPS: 每秒查询率(Query Per Second) ,每秒的响应请求数,也即是最大吞吐能力. QPS = req/sec = 请求数/秒 QPS统计方式 [一般使用 http_load 进行统计 ...
- wkhtmltoimage(网页剪切功能)
1.wkhtmltoimage使用wkhtmltoimage-0.10.0_rc2-static-amd64.tar.bz2版本,最新版本为wkhtmltoimage-0.11.0_rc1-stati ...
- 常用Jar包下载
Jackson包下载 :https://yunpan.cn/cBdPGeIESZ4jE 访问密码 36f7
- linux下php添加cur/soapl扩展
注意:在不同的扩展路径下 ./configure --help 的帮助信息不尽相同 1.跟php一起安装 下载 http://curl.haxx.se/download/ curl 取较低的版本 wg ...
- 移动通信安全——GSM安全体系
一.GSM网络概述 1.安全机制 认证用户,防止未授权接入 对空中接口传输加密,防止无线信道上用户信息被窃听 SIM卡独立于终端,管理用户信息 在空中接口上以临时身份标识用户,防止用户被跟踪 但是GS ...
- java面试题(开发框架)
博客分类: java基础 面试Java多线程编程设计模式 java基础面试题目,以备不时之需 俗话说 细节决定成败. 就算很简单,很小的问题,我们还是要注意一下的. ...
- 编程算法 - 翻转单词顺序 代码(C)
翻转单词顺序 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 输入一个英文句子, 翻转句子中单词的顺序, 但单词内字符的顺序不变. 首先翻转(r ...
- mini2440裸机试炼之——看门狗中断和复位操作
看门狗的工作原理: 设本系统程序完整执行一周期的时间是Tp,看门狗的定时周期为Ti,Ti>Tp,在程序正常执行时,定时器就不会溢出,若因为干扰等原因使系统不能在Tp时刻改动定时器的记数值,定时器 ...