粘贴下面代码

select 美化

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

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

    <title>Document</title>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

</head>

<style>

    body,ul{

        margin:0;

        padding: 0;

        background: #1D9669;

    }

    .content{

        padding-top:5%;

    }

    .content .select-wrap{

        width:300px;

        height:40px;

        font-size: 16px;

        margin: 0 auto;

        background: #fff;

        position: relative;

    }

    .content .select-wrap:after{

        content: '';

        display: block;

        width: 10px;

        height: 10px;

        border-left:1px #000 solid;

        border-bottom:1px #000 solid;

        transform: rotate(-45deg);

        position: absolute;

        top:11px;

        right: 12px;

    }

    .content .select-wrap .title{

        padding: 0 15px;

        line-height:40px;

        cursor: pointer;

    }

    .content .select-wrap ul{

        list-style-type: none;

        background-color: #fff;

        width: 100%;

        overflow-y: auto;

        top:40px;

        position: absolute;

        left:0;

        max-height: 0;

    }

    .content .select-wrap ul li{

        padding: 0 15px;

        line-height:40px;

        cursor: pointer;

    }

    .content .select-wrap ul li:hover{

        background-color: #e0e0e0;

    }

    .content .select-wrap .selected{

        background: #39f;

        color: #fff;

    }

    .content .open ul{

        max-height: 250px;

    }

    .content .open:after{

        transform: rotate(-225deg);

        top:18px;

        transition: all .3s ease-in;

    }

</style>

<script>

    $(function () {

        $(".select-wrap").on("click",function () {

            $(this).toggleClass("open");

        });

        var liItem = $(".select-wrap ul li");

        liItem.on("click",function () {

            var $this = $(this);

            liItem.removeClass("selected");

            $this.addClass("selected");

            $(".title").text($this.text());

            $(".selected").text($this.text()).attr("data-value",$this.attr("data-value"));

        })

    })

</script>

<body>

    <div class="content">

        <div class="select-wrap">

            <p class="title">请选择</p>

            <ul>

                <li data-value="HTML">HTML</li>

                <li data-value="CSS">CSS</li>

                <li data-value="JS">JS</li>

                <li data-value="PHP">PHP</li>

            </ul>

        </div>

    </div>

</body>

</html>

　　

　　

select随笔的更多相关文章

  1. 最全的ORACLE-SQL笔记

    -- 首先,以超级管理员的身份登录oracle sqlplus sys/bjsxt as sysdba --然后,解除对scott用户的锁 alter user scott account unloc ...

  2. Matplotlib数据可视化（6）：饼图与箱线图

    In [1]: from matplotlib import pyplot as plt import numpy as np import matplotlib as mpl mpl.rcParam ...

  3. jquery 获取和设置 checkbox radio 和 select option的值?

    ============== 获取和设置 checkbox radio 和 select的值? === val()函数, 其名字就表达了 它的意思: 他就是＝ value 的简写! val就是valu ...

  4. php随笔（一）

    之前的开发一直用的都是Thinkphp框架,对原生的php很不了解,近日打算把以前的项目拿一个出来用原生php再重写一次,顺便再把TP框架拆开好好分析分析. 之前的android开发虽说对面向对象的思 ...

  5. MyBitis(iBitis)系列随笔之五：多表(一对多关联查询)

    MyBitis(iBitis)系列随笔之一:MyBitis入门实例 MyBitis(iBitis)系列随笔之二:类型别名(typeAliases)与表-对象映射(ORM) MyBitis(iBitis ...

  6. SQL学习之SELECT子句顺序

    下面来总计下之前的随笔中所说过的所有的SELECT子句的顺序. 子句 说明 是否必须使用 SELECT                  要返回的列或者表达式                      ...

  7. 开发随笔——NOT IN vs NOT EXISTS

    原文:开发随笔--NOT IN vs NOT EXISTS 原文出处: http://blog.csdn.net/dba_huangzj/article/details/31374037  转载请引用 ...

  8. MongoDB入门系列（三）：查询（SELECT）

    一.概述 mongodb是最接近关系型数据库的NOSQL数据库,它的存储方式非常的灵活:以至于你会将它看成是一个经过冗余过的关系型数据库的表,这也是Mongodb原子性的一个特征.由于没有关系型数据库 ...

  9. 关于Mybatis的一些随笔

    Mapper.xml头文件 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http:/ ...

随机推荐

  1. 第4章 springboot热部署 4-1 SpringBoot 使用devtools进行热部署

    /imooc-springboot-starter/src/main/resources/application.properties #关闭缓存, 即时刷新 #spring.freemarker.c ...

  2. 数组中的最大值以及最小值的位置变换的问题（C++）

    将一个5×5的数组中的最大值放到数组的中心位置 分析:遍历数组,找到最大的元素,然后将该元素与中心位置的元素交换位置 #include<iostream> #include <std ...

  3. zookeeper集群安装(转)

    转载地址:http://www.blogjava.net/hello-yun/archive/2012/05/03/377250.html 本方法,本人亲自试验,可以成功. ZooKeeper是一个分 ...

  4. 《Linux内核设计与实现》读书笔记（六）- 内核数据结构

    内核数据结构贯穿于整个内核代码中,这里介绍4个基本的内核数据结构. 利用这4个基本的数据结构,可以在编写内核代码时节约大量时间. 主要内容: 链表 队列 映射 红黑树 1. 链表 链表是linux内核 ...

  5. inline 内联函数

    1.目的: 引入内联函数的目的是为了解决程序中函数调用的效率问题. 函数的引入可以减少程序的目标代码,实现程序代码和数据的共享.但是,函数调用也会带来降低效率的问题,因为调用函数实际上将程序执行顺序转 ...

  6. GitHub下载代码到本地

    1.git  clone git@github.com:Sehunwy/test.git(加粗的是下载的地址) 2.下载完成,此时本地是这样的: 参考:https://blog.csdn.net/qq ...

  7. UIPageViewController

    前言 iPhone 和 iPad 都是通过页控件来展示多个桌面,很多 App 在第一次使用时也会使用页控件来介绍自己的功能,页控件的交互效果非常好,适用于把几个简单的页面充分展示出来. 1.UIPag ...

  8. UITouch

    触摸事件基本都是发生在 viewController 中,首先触摸的对象是视图,而视图的类 UIView 继承了 UIRespnder 类,但是要对事件作出处理,还需要重写 UIResponder 类 ...

  9. loj #2006. 「SCOI2015」小凸玩矩阵

    #2006. 「SCOI2015」小凸玩矩阵   题目描述 小凸和小方是好朋友,小方给小凸一个 N×M N \times MN×M(N≤M N \leq MN≤M)的矩阵 A AA,要求小凸从其中选出 ...

  10. P1919 【模板】A*B Problem升级版（FFT快速傅里叶）

    题目描述 给出两个n位10进制整数x和y,你需要计算x*y. 输入输出格式 输入格式: 第一行一个正整数n. 第二行描述一个位数为n的正整数x. 第三行描述一个位数为n的正整数y. 输出格式: 输出一 ...