CSS3不一样的下拉选择框

本例中包含两个下拉选择框的动画示例，本例中并未使用select标签。本例中第一个案例也可用于标题、导航栏等位置。

案例一：

html布局

<div class="content">
　　<div class="select">
　　　　<p att="select p">所有选项</p>
　　　　<ul att="select ul">
　　　　　　<li data-value="所有选项" class="selected">所有选项</li>
　　　　　　<li data-value="html">html</li>
　　　　　　<li data-value="css">css</li>
　　　　　　<li data-value="javascript">javascript</li>
　　　　　　<li data-value="jQuery">jQuery</li>
　　　　</ul>
　　</div>
</div>

整体显示样式

<style type="text/css">
　　body{　　　　padding: 0;
　　　　margin: 0;
　　　　background-color: #0099cc;
　　　　color: #333333;
　　}
　　.content{
　　　　padding-top: 5%;
　　}
　　.content .select{
　　　　width: 300px;
　　　　height: 40px;
　　　　margin: 0 auto;
　　　　font-family: "Microsoft Yahei";
　　　　font-size: 16px;
　　　　background-color: #ffffff;
　　　　position: relative;
　　}
</style>

下拉列表样式及动画

[att~=select]{
    padding: 0;
    margin: 0;
}
.content .select:after{
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-left: 1px #cccccc solid;
    border-bottom: 1px #cccccc solid;
    position: absolute;
    top: 11px;
    right: 12px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: -webkit-transform .3s ease-in, top .3s ease-in;
    -moz-transition: -moz-transform .3s ease-in, top .3s ease-in;
    -ms-transition:  -ms-transform .3s ease-in, top .3s ease-in;
    -o-transition: -o-transform .3s ease-in, top .3s ease-in;
    transition: transform .3s ease-in, top .3s ease-in;
}
.content .select p{
    padding: 0 15px;
    line-height: 40px;
    /*设置光标样式：手型*/
    cursor: pointer;
}
.content .select ul{
    width: 100%;
    /*这样设置相当于隐藏了ul，便实现了下拉样式*/
    max-height: 0;
    list-style-type: none;
    background-color: #ffffff;
    overflow-y: auto;
    position: absolute;
    top: 40px;
    left: 0;
    -webkit-transition: max-height .3s ease-in;
    -moz-transition: max-height .3s ease-in;
    -ms-transition: max-height .3s ease-in;
    -o-transition: max-height .3s ease-in;
    transition: max-height .3s ease-in;
}
.content .select ul li{
    padding: 0 15px;
    line-height: 40px;
    cursor: pointer;
}
.content .select ul li:hover{
    background-color: #e0e0e0;
}
.content .select ul li.selected{
    background-color: #3399ff;
    color: #ffffff;
}
@-webkit-keyframes slide-down {
    0%{
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    25%{
        -webkit-transform: scale(1, 1.2);
        -moz-transform: scale(1, 1.2);
        -ms-transform: scale(1, 1.2);
        -o-transform: scale(1, 1.2);
        transform: scale(1, 1.2);
    }
    50%{
        -webkit-transform: scale(1, 0.85);
        -moz-transform: scale(1, 0.85);
        -ms-transform: scale(1, 0.85);
        -o-transform: scale(1, 0.85);
        transform: scale(1, 0.85);
    }
    75%{
        -webkit-transform: scale(1, 1.05);
        -moz-transform: scale(1, 1.05);
        -ms-transform: scale(1, 1.05);
        -o-transform: scale(1, 1.05);
        transform: scale(1, 1.05);
    }
    100%{
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}
@-moz-keyframes slide-down {
    0%{
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    25%{
        -webkit-transform: scale(1, 1.2);
        -moz-transform: scale(1, 1.2);
        -ms-transform: scale(1, 1.2);
        -o-transform: scale(1, 1.2);
        transform: scale(1, 1.2);
    }
    50%{
        -webkit-transform: scale(1, 0.85);
        -moz-transform: scale(1, 0.85);
        -ms-transform: scale(1, 0.85);
        -o-transform: scale(1, 0.85);
        transform: scale(1, 0.85);
    }
    75%{
        -webkit-transform: scale(1, 1.05);
        -moz-transform: scale(1, 1.05);
        -ms-transform: scale(1, 1.05);
        -o-transform: scale(1, 1.05);
        transform: scale(1, 1.05);
    }
    100%{
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}
@-o-keyframes slide-down {
    0%{
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    25%{
        -webkit-transform: scale(1, 1.2);
        -moz-transform: scale(1, 1.2);
        -ms-transform: scale(1, 1.2);
        -o-transform: scale(1, 1.2);
        transform: scale(1, 1.2);
    }
    50%{
        -webkit-transform: scale(1, 0.85);
        -moz-transform: scale(1, 0.85);
        -ms-transform: scale(1, 0.85);
        -o-transform: scale(1, 0.85);
        transform: scale(1, 0.85);
    }
    75%{
        -webkit-transform: scale(1, 1.05);
        -moz-transform: scale(1, 1.05);
        -ms-transform: scale(1, 1.05);
        -o-transform: scale(1, 1.05);
        transform: scale(1, 1.05);
    }
    100%{
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}
@keyframes slide-down {
    0%{
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    25%{
        -webkit-transform: scale(1, 1.2);
        -moz-transform: scale(1, 1.2);
        -ms-transform: scale(1, 1.2);
        -o-transform: scale(1, 1.2);
        transform: scale(1, 1.2);
    }
    50%{
        -webkit-transform: scale(1, 0.85);
        -moz-transform: scale(1, 0.85);
        -ms-transform: scale(1, 0.85);
        -o-transform: scale(1, 0.85);
        transform: scale(1, 0.85);
    }
    75%{
        -webkit-transform: scale(1, 1.05);
        -moz-transform: scale(1, 1.05);
        -ms-transform: scale(1, 1.05);
        -o-transform: scale(1, 1.05);
        transform: scale(1, 1.05);
    }
    100%{
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}
.content .select.open ul{
    max-height: 250px;
    transform-origin: 50% 0;
    -webkit-animation: slide-down 0.5s ease-in;
    -moz-animation: slide-down 0.5s ease-in;
    -o-animation: slide-down 0.5s ease-in;
    animation: slide-down 0.5s ease-in;
    -webkit-transition: max-height .2s ease-in;
    -moz-transition: max-height .2s ease-in;
    -ms-transition: max-height .2s ease-in;
    -o-transition: max-height .2s ease-in;
    transition: max-height .2s ease-in;
}
.content .select.open:after{
    -webkit-transform: rotate(-225deg);
    -moz-transform: rotate(-225deg);
    -ms-transform: rotate(-225deg);
    -o-transform: rotate(-225deg);
    transform: rotate(-225deg);
    top: 18px;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

使用JavaScript实现点击事件

实现点击事件还需要引用jQuery插件

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
　　$(function(){
　　　　$(‘.select > p‘).on(‘click‘, function (e) {　　　　　　// 检查class属性是否有open值，有则删除，没有则添加
　　　　　　$(‘.select‘).toggleClass(‘open‘);　　　　　　// 处理冒泡事件
　　　　　　e.stopPropagation();
　　　　});
　　　　$(‘.select ul li‘).on(‘click‘, function (e) {
　　　　　　var _this = $(this);
　　　　　　$(‘.select > p‘).text(_this.attr(‘data-value‘));
　　　　　　_this.addClass(‘selected‘).siblings().removeClass(‘selected‘);
　　　　　　$(‘.select‘).removeClass(‘open‘);
　　　　　　e.stopPropagation();
　　　　});
　　　　$(document).on(‘click‘, function () {
　　　　　　$(‘.select‘).removeClass(‘open‘);
　　　　});
　　});
</script>

原文地址：https://www.cnblogs.com/xiaobaizhiqian/p/8387251.html

时间： 2025-01-13 17:15:36

CSS3不一样的下拉选择框的相关文章

CSS3+Jquery实现带动画效果的下拉选择框

CSS3+JQuery实现带动画效果的下拉选择框. 元素结构为: 1 <div class="box"> 2 <p>this is the first li</p> 3 <div id="blank"></div> 4 <ul> 5 <li class="selected">this is the first li</li> 6 <li >

Bootstrap系列 -- 15. 下拉选择框select

Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role="form"> <div class="form-group"> <select class="form-control"> <option>1</option> <option>2</

下拉选择框改变表单action的简单例子

做了个简单的小例子用js弄的. form 的代码 1 <form action="" method="post" id="formRole"> type的下拉单 1 2 3 4 5 6 <select name="type" id="type" onchange="changeAction()"> <option value=&quo

一款javascript实现的超炫的下拉选择框

今天为给大家带来一款javascript实现的超炫的下拉选择框.下拉的列表由半用透明的幽灵按钮组成.显示下拉的时候,列表项由左右两侧飞入.消息时飞向左右两侧.一起看下效果图在线预览源码下载实现的代码. html代码: <div class="scifiUI"> <h1> Scifi Dropdown</h1> <ul> <li>Interactive</li> <li>Animated<

第三章：Select 下拉选择框的练习

1. 练习 Select 下拉选择框的练习. 2. 针对于这样的情况,如何来定位元素: 3. 总结: 看到下拉选择框,标准的 Select 下拉框时,可以选择合适的页面元素来定位.

今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览源码下载实现的代码. html代码: <div id="container"> <div class="inner"> <section id="main_content"

[jQueryUI] - Chosen：select下拉选择框美化插件及问题【转】

hosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组,同时也可禁用某些选择项. 先来看下插件的效果: 跟这个比起来,原来的select样式是不是弱爆了! 马上来武装我们的select吧: 1.先把js和css文件引用到网页里面去: ? 1 2 3 <link href="js/jqueryUI/chosen/chosen.css" t

bootstrap-表单控件——下拉选择框select元素

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>表单控件--下拉选择框select元</title> <!-

jQuery插件——下拉选择框

其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $.fn.extend({ dropdown:function (options) { return this.each(function (i, val) { $(val).css("position", "relative"); // 设置默认参数 var opts =