用javascript和css模拟select的脚本

</p> <p><title><a href="https://www.kunjuke.com/tag/8615/" title="模拟" target="_blank">模拟</a> 美化 <a href="https://www.kunjuke.com/tag/2050/" title="select" target="_blank">select</a>_北冥有鱼</title> </p> <p>select{<br /> height:20px;<br /> width:150px;<br /> }<br /> .divSlt{<br /> position:absolute;<br /> font-size:12px;<br /> }<br /> .divSlt span{<br /> display:block;<br /> width:100%;<br /> border:1px solid #999999;<br /> background:url(down.gif) no-repeat right center;<br /> text-indent:6px;<br /> cursor:pointer;<br /> }<br /> .divSlt ul{<br /> display:block;<br /> background-color:#FFFFFF;<br /> width:100%;<br /> border:1px solid #999999;<br /> border-top:0px;<br /> margin:0px;<br /> padding:0px;<br /> list-style:none;<br /> }<br /> .divSlt ul li{<br /> text-indent:5px;<br /> height:20px;<br /> line-height:20px;<br /> cursor:pointer;<br /> } </p> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200" height="30"> </td> <td width="200" height="30"> </td> <td width="200" height="30"> </td> </tr> <tr> <td width="200" height="30"> </td> <td width="200" height="30"> </td> <td width="200" height="30"> 选项一<br /> 选项二<br /> 选项三<br /> 选项四<br /> 选项五<br /> 选项六<br /> 选项七 </td> </tr> <tr> <td width="200" height="30"> </td> <td width="200" height="30"> 选项一<br /> 选项二<br /> 选项三 </td> <td width="200" height="30"> </td> </tr> <tr> <td width="200" height="30"> </td> <td width="200" height="30"></td> <td width="200" height="30"> </td> </tr> </table> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

• 用javascript实现select的美化的方法
• 用javascript来实现select标签的美化的代码
• css+js实现select列表横向排列效果代码
• select下拉选择框美化实现代码(js+css+图片)
• IE6下js通过css隐藏select的一个bug
• select标签模拟/美化方法采用JS外挂式插件
• select标记美化--JS式插件、后期加载
• 用JavaScript来美化HTML的select标签的下拉列表效果
• js+css实现select的美化效果