可以看一下动画

下面是代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <style>

        body{line-height: 40px;font-weight: bold}

        .container{height:40px;width: 230px;position: relative;

            margin-top:100px;margin-left: 100px; }

        .select{height: 40px;width: 200px;border-radius: 6px;background: #61b563 ;padding-left: 20px;position: relative;z-index: 2}

        .select span{display: block;float: right;height: 40px ;width: 40px; background: #4ea655;border-radius: 6px;}

        .select::after{content: '';width: 0;height: 0;border: 10px solid transparent;border-top-color: white;position: absolute;

            right: 10px;top: 15px;}

        .select::before{content: '';display: block;width: 5px;height: 40px;position: absolute;right: 40px;background:linear-gradient(-90deg,#4ea655, #61b563 )}

        .ul{height: 240px;width: 230px;padding-left: 10px;background:#61b563;border-radius: 6px;margin: 0;position: absolute;top: 40px;z-index: 1;opacity: 0;transition: all 0.8s}

        .ul1{opacity: 1;top: 60px}

        .ul::before{content: '';width: 0;height: 0;border: 10px solid transparent;border-bottom-color:#61b563 ;position: absolute;right: 30px;

            top:-20px;}

        .ul li{list-style: none;display: block;height: 30px;width: 220px;box-sizing: border-box;margin-top:8px;margin-bottom: 5px;;text-indent: 24px ;position: relative;line-height: 30px }

        .ul li:hover{background: #4ea655;transition: all .7s}

    </style>

</head>

<body>

    <div class="container">

        <div class="select">

            <a>请选择</a>

            <span></span>

        </div>

        <ul class="ul">

            <li>北京</li>

            <li>上海</li>

            <li>深圳</li>

            <li>广州</li>

            <li>重庆</li>

            <li>西安</li>

        </ul>

    </div>

    <script>

        var container=document.querySelector('.container');

        var select=document.querySelector('.select');

        var ul=document.querySelector('.ul');

        var li=document.querySelectorAll('ul li');

        var text=document.querySelector(".select a");

        ul.onclick=function(){

            event.stopPropagation();

        };

        select.onclick=function(){

            event.stopPropagation();

            if(ul.className=="ul"){

                ul.className+=" ul1"

                container.style.height='300px';

            }else {ul.className="ul"}

        };

        window.onclick=function(){

            ul.className="ul";

        };

        for(var i=0;i<li.length;i++){

            li[i].p=i;

            li[i].onclick=function(){

                text.innerText=this.innerText;

                for(var j=0;j<li.length;j++){

                    li[j].style.background='#61b563';

                    li[j].style.color='black';

                }

                var t=new Date('2017-09-09').toUTCString();

                document.cookie='option='+this.innerText+";expires="+t;

                document.cookie='index='+this.p+";expires="+t;

            }

        }

        var T1=setInterval(reload,50);

        function reload(){

            var cookies=document.cookie.split(';');

            var c1=cookies[0].split('=');

            var c2=cookies[1].split('=');

            text.innerText=c1[1];

            li[c2[1]].style.color='white';

            li[c2[1]].style.background=' #4ea655';

        }

    </script>

</body>

</html>

javascript 制作的美化select，利用cookie保存选择的更多相关文章

  1. 利用Cookie保存用户身份信息实现免登录

    <%@page import="sun.misc.BASE64Encoder"%> <%@page import="java.util.Base64.E ...

  2. 利用COOKIE保存历史浏览商品的一个简单思路

    <?php //如是COOKIE 里面不为空,则往里面增加一个商品ID if (!empty($_COOKIE['SHOP']['history'])){ //取得COOKIE里面的值,并用逗号 ...

  3. 如何利用cookie来保存用户登录账号

    众所周知,cookie在网页编写中不接或缺,今天就谈谈如何利用cookie技术来保存用户登录账号 1.首先是否保存用户登录账号当然是用户自行决定,所以我们需要在用户登录界面设置一个复选框,以此取得用户 ...

  4. JavaWeb利用cookie记住账号

    JavaWeb利用cookie记住账号. 首先,来看看界面什么样子. 记住账号最普遍的做法,就是在点击登录时,将账号保存到cookie中. 材料准备 <script src="${ct ...

  5. 利用 cookie 模拟网站登录

    import urllib import urllib2 import cookielib filename = 'cookie.txt' \#声明一个MozillaCookieJar对象实例来保存c ...

  6. 如何用iframe标签以及Javascript制作时钟？

    如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

  7. Servlet 利用Cookie实现一周内不重复登录

    import java.io.IOException;import java.io.PrintWriter; import javax.servlet.ServletException;import ...

  8. 推荐几款很棒的 JavaScript 表单美化和验证插件

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

  9. jquery美化select，自定义下拉框样式

    select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...

随机推荐

  1. select XXX into 和 Insert into XXX select

    检索一个表中的部分行存到另一张表中. 一 .另外的那张表没有新建的时候,使用 select XXX into,创建的表与原表有相同的列名和类型: select * into Departments_C ...

  2. leetcode@ [310] Minimum Height Trees

    For a undirected graph with tree characteristics, we can choose any node as the root. The result gra ...

  3. POJ3237-Tree （树链剖分，线段树区间更新+点更新+区间查询）

    两个更新操作,一个将第i条路径权值改为w,一个是将a-b之间所有路径权值取反. 一个查询操作,求a-b之间路径中权值最大的边. 很容易想到维护一个最大最小值,取反就是把最大最小取反交换一下. 开始遇到 ...

  4. 启动程序的同时传参给接收程序（XE8+WIN764）

    相关资料: http://blog.csdn.net/yanjiaye520/article/details/7590252 注意事项: 1.ParamStr(0)是实例自己. 2.传的参数是以空格分 ...

  5. BestCoder Round #68 (div.2) geometry（hdu 5605）

    geometry Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Su ...

  6. FIREDAC连接MSSQL 2000报不能支持连接MSSQL2000及更低版本的解决办法

    FIREDAC连接MSSQL 2000的时候会报错,原因是MSSQL CLIENT11或MSSQL CLIENT10客户端驱动程序已经不支持连接MSSQL2000及更低版本的数据库. 解决办法: 设置 ...

  7. java 关键字

    Keywords transient 序列化保存时,排除不想保存的字段时候用这个关键字修饰. final             final修饰的类不能被继承,final修饰的方法不能被重写,fina ...

  8. html常用的标签

    很重要的: <form><input><section><option><textarea> <div> 很重要,重要的是相关的 ...

  9. DynamoDB Local for Desktop Development

    Would you like to be able to write and test code that uses the Amazon DynamoDB API even if you have ...

  10. 使用GLSL实现更多数量的局部光照 【转】

    原文 http://www.cnblogs.com/CGDeveloper/archive/2008/07/02/1233816.html 众所周知,OpenGL固定管线只提供了最多8盏灯光.如何使得 ...