select下拉列表选择框效果及美化（before和after伪元素的妙用）

作者：JKNx2602931435 | 来源：互联网 | 2023-09-05 20:43

参考博客：https:github.comchokcocohttp:www.cnblogs.comlibin-1p5766729.htmlhttp:www.cnblogs.comc

参考博客：https://github.com/chokcoco
http://www.cnblogs.com/libin-1/p/5766729.html
http://www.cnblogs.com/coco1s/p/5667853.html
http://sbco.cc/magicCss/html/index.html
http://www.cnblogs.com/coco1s/p/5333786.html
http://www.cnblogs.com/coco1s/p/5528393.html
http://www.cnblogs.com/coco1s/p/5333786.html
http://www.cnblogs.com/coco1s/p/5365179.html

技术分享图片

原文地址：http://www.cnblogs.com/LY-leo/p/5765598.html

来一个简单的：https://github.com/cometwo/select_meihua

或者这个：http://www.dowebok.com/demo/196/


<html>

    <head>
        <meta charset="UTF-8">
        <title>title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
        <style type="text/css">
            ul li {
                list-style: none;
            }

            .test {
                position: relative;
                float: left;
                width: 120px;
                height: 40px;
                padding-left: 11px;
                font-size: 15px;
                line-height: 40px;
                cursor: pointer;
                border: 1px solid #d2d2d2;
                border-radius: 3px;
                margin-right: 20px;
                outline: none;
            }

            .test:before {
                position: absolute;
                right: 13px;
                top: 18px;
                width: 0;
                height: 0;
                content: "";
                border-width: 8px 8px 0 8px;
                border-style: solid;
                border-color: #d36969 transparent;
                -webkit-transition: transform .25s;
                -moz-transition: transform .25s;
                -ms-transition: transform .25s;
                -o-transition: transform .25s;
                transition: transform .25s;
            }

            .test:after {
                position: absolute;
                right: 15px;
                top: 18px;
                width: 0;
                height: 0;
                content: "";
                border-width: 6px 6px 0 6px;
                border-style: solid;
                border-color: #fff transparent;
                -webkit-transition: all .25s;
                -moz-transition: all .25s;
                -ms-transition: all .25s;
                -o-transition: all .25s;
                transition: all .25s;
            }

            .test.active:before {
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
            }

            .test.active:after {
                top: 20px;
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
            }

            .test .dropdown {
                position: absolute;
                right: 0;
                left: 0;
                display: none;
                padding: 0;
                border-radius: inherit;
                border: 1px solid #d2d2d2;
                box-shadow: 2px 2px 5px rgba(0, 0, 0, .4);
            }

            .test.active .dropdown {
                display: block;
            }

            .test .dropdown:before {
                position: absolute;
                right: 13px;
                bottom: 100%;
                width: 0;
                height: 0;
                content: "";
                border-width: 0 8px 8px 8px;
                border-style: solid;
                border-color: #d2d2d2 transparent;
            }

            .test .dropdown:after {
                position: absolute;
                right: 15px;
                bottom: 100%;
                width: 0;
                height: 0;
                content: "";
                border-width: 0 6px 6px 6px;
                border-style: solid;
                border-color: #fff transparent;
            }

            .test .dropdown li {
                float: left;
                width: 129px;
                font-size: 14px;
                -webkit-transition: all .3s ease-out;
                -moz-transition: all .3s ease-out;
                -ms-transition: all .3s ease-out;
                -o-transition: all .3s ease-out;
                transition: all .3s ease-out;
                text-align: center;
            }

            .test .dropdown li:first-of-type {
                border-radius: 3px 3px 0 0;
            }

            .test .dropdown li:last-of-type {
                border-radius: 0 0 3px 3px;
            }

            .test .dropdown li:hover {
                color: #fff;
                background: #c43c3d;
            }
        style>
        <script type="text/Javascript">
            window.Onload= function() {
                function DropDown(el) {
                    this.dd = el;
                    this.span = this.dd.children(‘span‘);
                    this.li = this.dd.find(‘ul.dropdown li‘);
                    this.val = ‘‘;
                }
                DropDown.prototype.initEvents = function() {
                    var obj = this;
                    obj.dd.on(‘click‘, function(event) {
                        $(this).toggleClass(‘active‘).siblings().removeClass(‘active‘);
                        event.stopPropagation();
                    });
                    obj.li.on(‘click‘, function() {
                        var opt = $(this);
                        obj.val = opt.html();
                        if(obj.span.html() == obj.val) return;
                        obj.span.html(obj.val);
                        $(document).click(function() {
                            $(‘.test‘).removeClass(‘active‘);
                        });
                    })
                }
                var test1 = new DropDown($(‘#type‘));
                var test2 = new DropDown($(‘#kind‘));
                test1.initEvents();
                test2.initEvents()
            }
        script>
    head>

    <body>
        <div id="type" class="test">
            <span>投资种类span>
            <ul class="dropdown">
                <li>期货li>
                <li>股票li>
                <li>期权li>
            ul>
        div>
        <div id="kind" class="test">
            <span>投资类型span>
            <ul class="dropdown">
                <li>趋势li>
                <li>震荡li>
                <li>套利li>
                <li>选股li>
                <li>择时li>
            ul>
        div>
    body>

html>

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://www.cnblogs.com/captainbed

select 下拉列表选择框效果及美化（before 和 after伪元素的妙用）

推荐阅读

js
Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine

本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 12:01:13
io
知识图谱——机器大脑中的知识库

本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]

蜡笔小新 2023-12-14 10:06:19
js
Alink回归预测的不完善问题及期待

本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]

蜡笔小新 2023-12-14 14:25:33
list
postman测试登录后的接口_使用postman进行接口测试的方法(测试用户管理模块)

本文介绍了使用postman进行接口测试的方法，以测试用户管理模块为例。首先需要下载并安装postman，然后创建基本的请求并填写用户名密码进行登录测试。接下来可以进行用户查询和新增的测试。在新增时，可以进行异常测试，包括用户名超长和输入特殊字符的情况。通过测试发现后台没有对参数长度和特殊字符进行检查和过滤。 ... [详细]

蜡笔小新 2023-12-14 10:29:45
io
Linux进程控制块PCBtask_struct结构体结构及作用详解

本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]

蜡笔小新 2023-12-13 21:31:18
io
《数据结构》学习笔记3——串匹配算法性能评估

本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]

蜡笔小新 2023-12-13 16:16:05
js
ABAP开发发送邮件程序的配置和代码整理

本文介绍了通过ABAP开发往外网发邮件的需求，并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定，可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度：184字。 ... [详细]

蜡笔小新 2023-12-13 15:50:17
js
求解hdu 1003 java题目的动态规划优化方法

本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]

蜡笔小新 2023-12-14 13:11:00
io
OC学习笔记之@property和@synthesize

本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]

蜡笔小新 2023-12-14 12:05:06
io
[译]技术公司十年经验的职场生涯回顾

本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同，令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望，认为人类有能力不断改善自己。 ... [详细]

蜡笔小新 2023-12-14 11:31:05
js
Hibernate基础映射

在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]

蜡笔小新 2023-12-14 10:57:47
js
测试人的性格，点火让他着急，考验婚姻问题的善意玩人

本文讲述了作者通过点火测试男友的性格和承受能力，以考验婚姻问题。作者故意不安慰男友并再次点火，观察他的反应。这个行为是善意的玩人，旨在了解男友的性格和避免婚姻问题。 ... [详细]

蜡笔小新 2023-12-14 09:10:09
js
java 线程死锁模拟

1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]

蜡笔小新 2023-12-13 19:12:25
io
后台获取视图对应的字符串

1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]

蜡笔小新 2023-12-13 18:03:01
js
动态规划算法的基本步骤及最长递增子序列问题详解

本文详细介绍了动态规划算法的基本步骤，包括划分阶段、选择状态、决策和状态转移方程，并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中，在以后尽可能多地利用这些子问题的解，从而提高算法的效率。 ... [详细]

蜡笔小新 2023-12-13 15:38:19

JKNx2602931435

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章