基于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属性的方法,同时后 ...
随机推荐
- 为什么Domain controller上的time synchronization非常重要?
虚拟机默认情况下所拥有的资源都是不同的, 比如说CPU clock. 在一个忙碌的系统中, 虚拟机甚至可能在很短的一段时间内被拒绝分配资源给它, 这种情况还可能发生在高系统负荷, VMotion, B ...
- 十个书写Node.js REST API的最佳实践(上)
收录待用,修改转载已取得腾讯云授权 原文:10 Best Practices for Writing Node.js REST APIs 我们会通过本文介绍下书写Node.js REST API的最佳 ...
- 《深入浅出数据分析》-利用Excel的Solver求橡皮玩具的最大利润
背景:一玩具厂可以生产两种浴盆玩具,分别是橡皮鸭和橡皮鱼,并且原材料和生产时间都有所限制,求如何才分配生产两种玩具的数量才可以让厂商达到最大利润. 假设条件如下: 产品名称 数量 duck a ...
- 超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)
在线演示 使用Bootstrap实现的响应式单页面模板. 桌面效果: 移动设备效果: 阅读全文:超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)
- (step6.1.1)hdu 1879(继续畅通工程——最小生成树、kruscal)
题目大意:输入一个整数n,表示有n个村庄.在接下来的n(n-1)/2行中,每行有4个整数begin end weight flag.分别表示从begin到end之间可以连通 ,他们之间的费用为w ...
- chrome插件下载
chrome插件下载2018 CreateTime--2018年3月5日11:21:21 Author:Marydon 插件推荐 如何获取? 文章顶部左上角是我的qq号,这些chrome插件加我免 ...
- [Verilog]随意整数(奇数,偶数)分频器设计, 50%占空比
module div_clk(clk_in, divisor, clk_out); input clk_in; input divisor; output clk_out; reg clk_out = ...
- HTML-IE6复制BUG
在IE6下使用浮动可能会出现文字重复的情况. 在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制,但是代码里查看文字可并没有多出来. 看个例子: XML/HT ...
- checkbox显示选中内容个数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ubuntu13.04如何修改保存屏幕亮度
ubuntu13.04如何修改保存屏幕亮度 入手ubuntu两月有余,最初只是想装个ubuntu学习下linux,然后搞了个win7和ubuntu的双系统,最后干脆将win7干掉了,直接让ubu ...