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

2016-11-25 11:23:33来源:cnblogs.com作者:285267128人点击

第七城市

原始的下拉框不好看这里推荐一个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>

  

 

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台