原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示


在线预览

下载地址

实例代码

<!DOCTYPE html>

<html lang="en" class="no-js">

    <head>

        <meta charset="UTF-8" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>jQuery自定义下拉框插件 | 演示 1</title>

        <link rel="stylesheet" type="text/css" href="css/normalize.css" />

        <link rel="stylesheet" type="text/css" href="css/demo.css" />

        <link rel="stylesheet" type="text/css" href="css/cs-select.css" />

        <link rel="stylesheet" type="text/css" href="css/cs-skin-border.css" />

        <!--[if IE]>

        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

        <![endif]-->

    </head>

    <body class="demo-1">

        <div class="container">

            <header class="codrops-header">

                <h1> 自定义选择元素</h1>

                <nav class="codrops-demos">

                    <a class="current-demo" href="index.html">边框</a>

                    <a href="index2.html">下划线</a>

                    <a href="index3.html">伸缩</a>

                    <a href="index4.html">滑动</a>

                    <a href="index5.html">覆盖</a>

                    <a href="index6.html">旋转</a>

                    <a href="index7.html">弹出层选择</a>

                    <a href="index8.html">环形效果</a>

                </nav>

            </header>

            <section>

                <select class="cs-select cs-skin-border">

                    <option value="" disabled selected> 联系人方式</option>

                    <option value="email">E-Mail</option>

                    <option value="twitter">Twitter</option>

                    <option value="linkedin">LinkedIn</option>

                </select>

            </section>

        </div><!-- /container -->

        <script src="js/classie.js"></script>

        <script src="js/selectFx.js"></script>

        <script>

            (function() {

                [].slice.call(document.querySelectorAll('select.cs-select')).forEach(function(el) {

                    new SelectFx(el);

                });

            })();

        </script>

    </body>

</html>

　　

jQuery自定义漂亮的下拉框插件8种效果演示的更多相关文章

  1. jQuery自定义漂亮的下拉框插件8种效果

    jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 实例代码 <body class="demo-1"> ...

  2. jQuery下拉框插件8种效果

    jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...

  3. Dropdown.js基于jQuery开发的轻量级下拉框插件

    Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...

  4. jQuery自定义多选下拉框

    项目中需要自定义一个下拉框多选插件,业务问题还是自己实现比较好 通过$.fn 向jQuery添加新的方法 下拉数据通过参数传递进去,通过调用该插件时接收,选择后的确定与取消事件采用事件传递方式 代码如 ...

  5. jQuery UI 多选下拉框插件：jquery-ui-multiselect

    前一个项目,由于项目需求,需要大量使用到下拉多选框,而由于本人又不会写有关 CSS 样式,所以,便上网找到了这个 jQuery 插件:jquery-ui-multiselect .该款插件提供了基本下 ...

  6. pentaho cde 自定义复选下拉框 checkbox select

    pentaho  自带的component 虽多,但是当用户需要在一个表格中查看多个组别的数据时,pentaho自带的单选框就不能实现了,所以复选下拉框势在必行,实现效果如下: 实现原理是借用了jqu ...

  7. query多选下拉框插件 jquery-multiselect(修改)

    其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...

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

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

  9. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

随机推荐

  1. 一次意外的X锁不阻塞问题

        最近有一个朋友问我一个关于给查询操作强制上X锁却不阻塞的问题.该查询写在一个存储过程中,代码如代码1所示: 1: create PROC [dbo].[GetCityOrders] 2: @c ...

  2. SQL Server中的版本号

        在SQL Server中,通常版本号的命名是大版本.小版本.累积更新这种形式,比如说9.X.XXX就是SQL Server 2005.下面我将把SQL Server中版本号对应的版本列出来,以 ...

  3. HTML的音频和视频

    目录 [1]媒体格式 音频格式 视频格式 [2]元素 插件元素 HTML5元素 [3]HTML音频 [4]HTML视频 前面的话 多媒体元素(比如视频和音频)存储于媒体文件中,确定媒体类型的最常用的方 ...

  4. java简单词法分析器(源码下载)

    java简单词法分析器 : http://files.cnblogs.com/files/hujunzheng/%E7%AE%80%E5%8D%95%E8%AF%8D%E6%B3%95%E5%88%8 ...

  5. 邻接表有向图(三)之 Java详解

    前面分别介绍了邻接表有向图的C和C++实现,本文通过Java实现邻接表有向图. 目录 1. 邻接表有向图的介绍 2. 邻接表有向图的代码说明 3. 邻接表有向图的完整源码 转载请注明出处:http:/ ...

  6. 邻接矩阵无向图(二)之 C++详解

    本章是通过C++实现邻接矩阵无向图. 目录 1. 邻接矩阵无向图的介绍 2. 邻接矩阵无向图的代码说明 3. 邻接矩阵无向图的完整源码 转载请注明出处:http://www.cnblogs.com/s ...

  7. CSS 魔法系列：纯 CSS 绘制各种图形《系列五》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  8. WEB编程中获取src目录下的文件（没有src目录）

    这种情况遇见的会比较多,像一个WEB工程,如果在src下面写了一个xml或者一些其它的文件,当工程发布到服务器时,web程序是在tomcat等服务器下运行这个程序的,这个时候,程序目录里面并没有src ...

  9. tomcat连接器

    Connector是Tomcat最核心的组件之一,负责处理一个WebServer最核心的连接管理.Net IO.线程(可选).协议解析和处理的工作.一.连接器介绍在开始Connector探索之路之前, ...

  10. 安装thrift

    要求 thrift至少需要支持三种语言: Java PHP Go 预安装 基本教程: http://thrift.apache.org/docs/install/centos 使用最新的thrift, ...