CSS3美化表单控件全集

    border-left: 1px solid #ccc;   

    border-bottom: 1px solid #ccc;   

    -webkit-transform: rotate(-45deg);   

    transform: rotate(-45deg);   

    -webkit-transition: transform .2s ease-in, top .2s ease-in;   

    transition: transform .2s ease-in, top .2s ease-in;   

}   

/*  

    被选中的列表项显示的区域  

*/  

.container .select p{   

    padding: 0 15px;   

    line-height: 40px;   

    cursor: pointer;   

}   

/*  

    下拉列表的样式  

    默认高度为0  

*/  

.container .select ul{   

    list-style: none;   

    background-color: #fff;   

    width: 100%;   

    overflow-y: auto;   

    position: absolute;   

    top: 40px;   

    left: 0;   

    max-height:0;   

    -webkit-transition: max-height .3s ease-in;   

    transition: max-height .3s ease-in;   

}   

.container .select ul li{   

    padding: 0 15px;   

    line-height: 40px;   

    cursor: pointer;   

}   

.container .select ul li:hover{   

    background-color: #e0e0e0;   

}   

.container .select ul li.selected{   

    background-color: #39f;   

    color: #fff;   

}   

/*下拉控件动画*/  

@-webkit-keyframes slide-down{   

    0%{   

        -webkit-transform: scale(1, 0);   

        transform: scale(1, 0);   

    }   

    25%{   

        -webkit-transform: scale(1, 1.2);   

        transform: scale(1, 1.2);   

    }   

    50%{   

        -webkit-transform: scale(1, .85);   

        transform: scale(1, .85);   

    }   

    75%{   

        -webkit-transform: scale(1, 1.05);   

        transform: scale(1, 1.05);   

    }   

    100%{   

        -webkit-transform: scale(1, 1);   

        transform: scale(1, 1);   

    }   

}   

@keyframes slide-down{   

    0%{   

        -webkit-transform: scale(1, 0);   

        transform: scale(1, 0);   

    }   

    25%{   

        -webkit-transform: scale(1, 1.2);   

        transform: scale(1, 1.2);   

    }   

    50%{   

        -webkit-transform: scale(1, .85);   

        transform: scale(1, .85);   

    }   

    75%{   

        -webkit-transform: scale(1, 1.05);   

        transform: scale(1, 1.05);   

    }   

    100%{   

        -webkit-transform: scale(1, 1);   

        transform: scale(1, 1);   

    }   

}   

.container .select.on ul{   

    /*  

        默认情况下,ul的高度为0,当点击控控件的时候,  

        设置下拉列表的高度。  

    */  

    max-height: 300px;   

    -webkit-transform-origin: 50% 0;   

    transform-origin: 50% 0;   

    -webkit-animation: slide-down .5s ease-in;   

    animation: slide-down .5s ease-in;   

}   

/*下拉选项被选中后控制箭头的方向*/  

.container .select.on:after{   

    -webkit-transform: rotate(-225deg);   

    transform: rotate(-225deg);   

    top: 18px;   

}    

这里只是静态的样式，如果要实现“选择”这个过程，需要用到JavaScript来实现。

JavaScript Code复制内容到剪贴板

$(function(){   

    var selected  = $('.select > p');   

    //控制列表显隐   

    selected.on('click', function(event){   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!