Select列表下拉框之DIY

来源：互联网发布：linux 查看文件夹大小编辑：程序博客网时间：2024/05/14 22:29
下拉框的样式是不能完全随心改变的，于是我就仿制一个，上边就是做出来的效果。先是一个input，右边的箭头是这个图片，下边的列表是一个table。代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
        <head>
                <title>仿下拉框</title>
                <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
                <style type="text/css">
                .div_foot
                {
                        scrollbar-3dlight-color:#E6E4E4;     /* 滚动条亮边框 */
                        scrollbar-arrow-color:#E6E4E4;       /* 方向箭头     */
                        scrollbar-track-color:#F6F5F4;       /* 拖动区域     */
                        scrollbar-darkshadow-color:#D3D3D3;  /* 暗边框       */
                        scrollbar-face-color:#E6E4E4;        /* 3D表面       */
                        scrollbar-highlight-color:#E6E4E4;   /* 3D界面的亮边 */
                        scrollbar-shadow-color:#E6E4E4;      /* 3D界面的暗边 */
                        color:#444444;
                        font-size:12px;
                        border:1px solid #BCBCBC;
                        border-top:1px solid #BCBCBC;
                }
                 
                #foot td
                {
                        color:#444444;
                        font-size:12px;
                        height:20px;
                        padding-top:2px;
                        padding-left:2px;
                        background-color:#ffffff;
                        cursor:hand;
                }
                .input_foot
                {
                        border:1px 0 1px 1px solid #BCBCBC;
                        border-right:0;
                        color:#444444;
                        font-size:12px;
                        padding-top:2px;
                        padding-left:2px;
                        height:18px;
                }
                </style>
                <script>
                function showSelect(obj)
                {
                        if (obj.style.display=='')
                                obj.style.display='none';
                        else if (obj.style.display=='none')
                                         obj.style.display='';
                }
                function goLink(url)
                {
                        switch (url)
                        {
                                case 0: window.open('http://www.baidu.com');break;
                                case 1: window.open('http://www.google.cn');break;
                                case 2: window.open('http://www.cctv.com');break;
                                case 3: window.open('http://www.kbs.co.kr');break;
                                case 4: window.open('http://www.sxtvs.com');break;
                                case 5: window.open('http://blog.leo-space.cn');break;
                        }
                        family.style.display= 'none';
                }
                function mover(obj)
                {
                        obj.style.backgroundColor="#F3F3F3";
                }
                function mout(obj)
                {
                        obj.style.backgroundColor="#FFFFFF";
                }
                </script>
        </head>
        <body>
                <div>
                        <input type="text" style="width:99" class="input_foot" value="友情链接" readonly><img src="arrow0.gif" align="absmiddle" style="cursor:hand;" onclick="showSelect(family)">
                </div>
                <div id="family" class="div_foot" style="position:absolute;top:33; width:115px; height:82 ;display:none; overflow-y:scroll"
                        onmouseout="this.style.display='none'" onmouseover="this.style.display=''">
                        <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" height="100%">
                                <tr>
                                        <td valign="top">
                                                <table width="100%" cellpadding="0" cellspacing="0" border="0" id="foot">
                                                        <tr>
                                                                <td onmouseover="mover(this)" onmouseout="mout(this)" onclick="goLink(0)">百度</td>
                                                        </tr>
                                                        <tr>
                                                                <td onmouseover="mover(this)" onmouseout="mout(this)" onclick="goLink(1)">Google中国</td>
                                                        </tr>
                                                        <tr>
                                                                <td onmouseover="mover(this)" onmouseout="mout(this)" onclick="goLink(2)">央视国际</td>
                                                        </tr>
                                                        <tr>
                                                                <td onmouseover="mover(this)" onmouseout="mout(this)" onclick="goLink(3)">韩国KBS</td>
                                                        </tr>
                                                        <tr>
                                                                <td onmouseover="mover(this)" onmouseout="mout(this)" onclick="goLink(4)">陕西电视台</td>
                                                        </tr>
                                                        <tr>
                                                                <td onmouseover="mover(this)" onmouseout="mout(this)" onclick="goLink(5)">新浪漓鸥空间</td>
                                                        </tr>
                                                </table>
                                        </td>
                                </tr>
                        </table>
                </div>
        </body>
</html>