自定义select样式 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            word-wrap:break-word;
        }

        a:link, a:visited {
            color: #656d78;
            text-decoration: none;
        }
        .login_slct a {
            margin-right: -8px;
            padding-right: 16px;
            background: url(images/arrwd.gif) no-repeat 100% 50%;
        }

        a{
            outline: none;
        }
        .sltm{
            padding: 5px 11px 5px 10px;
            border: 1px solid #DDD;
            background-color: #FFF;
            text-align: left;
        }

        .sltm  ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .sltm li{
            padding: 2px 0;
            color: #666;
            cursor: pointer;
            list-style: none;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        function checkStatus(){
            if(!flag){
                $("#loginfield_ctrl_menu").fadeOut();
            }
        }
         var flag=false;
         $(document).ready(function(){
            $("#loginfield_ctrl").click(function(e){
                var offset=  $("#loginfield_ctrl").offset();
                $("#loginfield_ctrl_menu").css({"left":offset.left-5,"top":offset.top+15});
                $("#loginfield_ctrl_menu").fadeIn();
            });
             $("#loginfield_ctrl_menu").mouseleave(function(){
                 $("#loginfield_ctrl_menu").fadeOut();
                 flag=false;
             });
             $("#loginfield_ctrl_menu").mouseover(function(){
                 flag=true;
             });
             $("#loginfield_ctrl").mouseleave(function(){
                 setTimeout("checkStatus()", 500);
             });

             $("#loginfield_ctrl_menu li").click(function(){
                 var index=$(this).index();
                 var text=$(this).text();
                 $("#loginfield_ctrl").text(text);
                 $("option").val(index+1);
             });
        });
    </script>
</head>
<body>
<div style="position: relative;left: 100px;top:200px">
    <form action="www.baidu.com" method="get">
<span class="login_slct">
    <select name="loginfield" style="float: left; display: none;" width="45" id="loginfield_LieJW" s>
        <option value="1" selected="selected"></option>
    </select>
    <a href="javascript:;" id="loginfield_ctrl" style="width:45px" tabindex="1">Email</a>
</span>
        <input value="submit" type="submit" />
    </form>
</div>
<div style="height: 200px">
asdfasfd
</div>
<div id="loginfield_ctrl_menu" class="sltm" style="width: 50px;position: absolute; z-index: 301; display: none;">
    <ul>
        <li>Email</li>
        <li>用户名</li>
    </ul>
</div>
</body>
</html>

好久没用jquery了，写的很烂，但是大致逻辑实现了，希望哪位能优化下

posted @ 2015-03-31 15:02  高兴的博客  阅读(954)  评论(0)  编辑  收藏  举报