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>

 案例二：

案例二与案例一的html布局相似，只是在p标签后面多了一个i标签，用来显示右侧的三横，如下图

<div class="content">
　　<div class="select">
　　　　<p att="select p">所有选项</p>
　　　　<i></i>
　　　　<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>

css

整体样式与案例一相同

接下来是css样式

[att~=select]{
    padding: 0;
    margin: 0;
}
.content .select > i{
    position: absolute;
    top: 12px;
    right: 10px;
    width: 20px;
    height: 12px;
    border-top: 3px #cccccc solid;
    border-bottom: 3px #cccccc solid;
    cursor: pointer;
}
.content .select > i:after{
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #cccccc;
}
.content .select p{
    padding: 0 15px;
    line-height: 40px;
    /*设置光标样式：手型*/
    cursor: pointer;
}
.content .select ul{
    width: 100%;
    /*这样设置相当于隐藏了ul，便实现了下拉样式*/
    height: 0;
    list-style-type: none;
    background-color: #ffffff;
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 1;
    overflow: hidden;
    -webkit-transition: top .2s ease, height .2s ease;
    -moz-transition: top .2s ease, height .2s ease;
    -ms-transition: top .2s ease, height .2s ease;
    -o-transition: top .2s ease, height .2s ease;
    transition: top .2s ease, height .2s ease;
}
.content .select ul li{
    padding: 0 15px;
    line-height: 40px;
    cursor: pointer;
    opacity: 0;
    -webkit-transform: translateX(300px);
    -moz-transform: translateX(300px);
    -ms-transform: translateX(300px);
    -o-transform: translateX(300px);
    transform: translateX(300px);
    -webkit-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -ms-transition: transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
}
.content .select ul li:hover{
    background-color: #e0e0e0;
}
.content .select ul li.selected{
    background-color: #3399ff;
    color: #ffffff;
}
.content .select.open ul{
    height: 200px;
    transform-origin: 50% 0;
    top: -80px;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
.content .select.open ul li{
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
.content .select.open ul li:nth-child(1){
    -webkit-transition: opacity .2s ease .05s, -webkit-transform .3s ease .05s;
    -moz-transition: opacity .2s ease .05s, -moz-transform .3s ease .05s;
    -ms-transition: opacity .2s ease .05s, -ms-transform .3s ease .05s;
    -o-transition: opacity .2s ease .05s, -o-transform .3s ease .05s;
    transition: opacity .2s ease .05s, transform .3s ease .05s;
}
.content .select.open ul li:nth-child(2){
    -webkit-transition: opacity .2s ease .1s, -webkit-transform .3s ease .1s;
    -moz-transition: opacity .2s ease .1s, -moz-transform .3s ease .1s;
    -ms-transition: opacity .2s ease .1s, -ms-transform .3s ease .1s;
    -o-transition: opacity .2s ease .1s, -o-transform .3s ease .1s;
    transition: opacity .2s ease .1s, transform .3s ease .1s;
}
.content .select.open ul li:nth-child(3){
    -webkit-transition: opacity .2s ease .15s, -webkit-transform .3s ease .15s;
    -moz-transition: opacity .2s ease .15s, -moz-transform .3s ease .15s;
    -ms-transition: opacity .2s ease .15s, -ms-transform .3s ease .15s;
    -o-transition: opacity .2s ease .15s, -o-transform .3s ease .15s;
    transition: opacity .2s ease .15s, transform .3s ease .15s;
}
.content .select.open ul li:nth-child(4){
    -webkit-transition: opacity .2s ease .2s, -webkit-transform .3s ease .2s;
    -moz-transition: opacity .2s ease .2s, -moz-transform .3s ease .2s;
    -ms-transition: opacity .2s ease .2s, -ms-transform .3s ease .2s;
    -o-transition: opacity .2s ease .2s, -o-transform .3s ease .2s;
    transition: opacity .2s ease .2s, transform .3s ease .2s;
}
.content .select.open ul li:nth-child(5){
    -webkit-transition: opacity .2s ease .25s, -webkit-transform .3s ease .25s;
    -moz-transition: opacity .2s ease .25s, -moz-transform .3s ease .25s;
    -ms-transition: opacity .2s ease .25s, -ms-transform .3s ease .25s;
    -o-transition: opacity .2s ease .25s, -o-transform .3s ease .25s;
    transition: opacity .2s ease .25s, transform .3s ease .25s;
}

js与案例一相同