一聚教程网:一个值得你收藏的教程网站

最新下载

平安彩票新疆时时彩网上投注

时间:2014-11-12 00:00:00 编辑:简简单单 来源:原创

CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到上面的样式,不兼容IE6样式,因为用到了opacity。

 代码如下

 


       
           
                select-area" id="select">
                   

                           

  •                            
                                   
                                   
                               
                           

  •                        

  •                            
                                   
                                   
                               
                           

  •                        

  •                            
                                   
                                   
                               
                           

  •                        

  •                            
                                   
                                   
                               
                           

  •                    

               
               
                   
               
           
       
   

CSS样式:

 代码如下

 

JQuery代码:

 代码如下

<script type="text/javascript">
    $(".sel_wrap").on("change", function() {
        var o;
        var opt = $(this).find('option');
        opt.each(function(i) {
            if (opt[i].selected == true) {
                o = opt[i].innerHTML;
            }
        })
        $(this).find('label').html(o);
    });
</script>

效果代码如下

 

CSS select样式优化一个例子

注意:记得加载jquery插件哦

文章评论

热门栏目