下拉框的样式是不能完全随心改变的,于是我就仿制一个,上边就是做出来的效果。先是一个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>